Highcharts-ng 是一个 AngularJS 的指令扩展,实现了在 AngularJS 应用中集成 Highcharts 图表库的功能。
使用方法:
var myapp = angular.module('myapp', ["highcharts-ng"]);
HTML:
<highchart id="chart1" config="chartConfig"></highchart>
chartConfig:
//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
}
};
文章转载自 开源中国社区 [http://www.oschina.net]
时间: 2024-09-14 19:42:28