How to use highcharts in angular

This article mainly introduces the sample code for using highcharts in angular. It is of great practical value. Friends in need can refer to it. I hope it can help everyone.

Installing dependencies

##

npm install highcharts-ng --save

Introducing dependencies

##

'highcharts/highcharts.src.js',
'highcharts-ng/dist/highcharts-ng.min.js'

Inject dependencies

var myapp = angular.module('myapp', ["highcharts-ng"]);

Instance

##

// html
<highchart class="chart" config="chartConfig" class="span9" ></highchart>

// js
$scope.chartConfig = {
 title: {
   text: &#39;哈哈哈&#39;,
   x: -20
 },
 subtitle: {
  text: &#39;Click and drag to zoom in.&#39;,
  x: -20
 },
 xAxis: {
  categories: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;, &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;]
 },
 yAxis: {
  title: {
   text: &#39;温度 (°C)&#39;
  },
  plotLines: [{
   value: 0,
   width: 1,
   color: &#39;#808080&#39;
  }]
 },
 tooltip: {
  valueSuffix: &#39;°C&#39;
 },
 legend: {
  layout: &#39;vertical&#39;,
  align: &#39;right&#39;,
  verticalAlign: &#39;middle&#39;,
  borderWidth: 0
 },
 series: [{
  name: &#39;东京&#39;,
  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
 }, {
  name: &#39;纽约&#39;,
  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
 }, {
  name: &#39;柏林&#39;,
  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
 }, {
  name: &#39;伦敦&#39;,
  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
 }]
};

Result

Basic composition of Highcharts

Related recommendations:

Sharing of value transfer and communication methods between different components in angular

Examples share some experience of using ui calendar in angular

How to obtain built-in services and obtain local information in angular

The above is the detailed content of How to use highcharts in angular. For more information, please follow other related articles on the PHP Chinese website!