AngularJS 图表扩展 Highcharts-ng
- 授权协议: MIT
- 开发语言: JavaScript
- 操作系统: 跨平台
- 软件首页: https://github.com/pablojim/highcharts-ng
- 软件文档: https://github.com/pablojim/highcharts-ng
软件介绍
Highcharts-ng 是一个 AngularJS 的指令扩展，实现了在 AngularJS 应用中集成 Highcharts 图表库的功能。
演示地址：http://jsfiddle.net/pablojim/46rhz/
使用方法：
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
}
};
