Question

如何在angularjs中使用highcharts

Answer 1

Highcharts-ng 是一个将Highcharts 图表库集成至AngularJS应用中的AngularJS 指令扩展。
特性:
Adding and removing series
Setting/Updating Chart options
Updating the chart title
2 way binding to chart xAxis
Control of Loading status
Resizes with screen size changes.

演示地址：http://jsfiddle.net/pablojim/46rhz/
使用方法：
?

1

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

HTML：
?

1

<highchart id="chart1" config="chartConfig"></highchart>

chartConfig:
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

//This is not a highcharts object. It just looks a little like one!
var chartConfig = {

options: {
//This is the Main Highcharts chart config. Any Highchart options are valid here.
//will be overriden by values specified below.
chart: {
type: 'bar'
},
tooltip: {
style: {
padding: 10,
fontWeight: 'bold'
}
}
},
//The below properties are watched separately for changes.

//Series object (optional) - a list of series using normal highcharts series options.
series: [{
data: [10, 15, 12, 8, 7]
}],
//Title configuration (optional)
title: {
text: 'Hello'
},
//Boolean to control showng loading status on chart (optional)
//Could be a string if you want to show specific loading text.
loading: false,
//Configuration for the xAxis (optional). Currently only one x axis can be dynamically controlled.
//properties currentMin and currentMax provied 2-way binding to the chart's maximimum and minimum
xAxis: {
currentMin: 0,
currentMax: 20,
title: {text: 'values'}
},
//Whether to use HighStocks instead of HighCharts (optional). Defaults to false.
useHighStocks: false,
//size (optional) if left out the chart will default to size of the div or something sensible.
size: {
width: 400,
height: 300
},
//function (optional)
func: function (chart) {
//setup some logic for the chart
}
};

Answer 2

现在angular有相应的库可以用了，如果你感兴趣可以参考一下Angular HighCharts教程