highcharts-ng 的git地址:https://github.com/pablojim/highcharts-ng
我这里使用的npm:
npm install highcharts-ng
HTML代码片段:
引入相应的js文件:
编写js代码:
var myapp = angular.module('myApp', ["highcharts-ng"]);
myapp.controller('MyCtrl',['$scope',function($scope) {
$scope.chartConfig = {
'options': {
'chart': {
'type': 'column',//柱状图
zoomType: 'none',
plotShadow: true,
plotBorderWidth: 1
},
'lang': {
printChart:"打印图表",
downloadJPEG: "下载JPEG 图片" ,
downloadPDF: "下载PDF文档" ,
downloadPNG: "下载PNG 图片" ,
downloadSVG: "下载SVG 矢量图" ,
exportButtonTitle: "导出图片"
},
legend: {enabled: true},
xAxis: {
gridLineWidth: 1,
labels: {
style: {
fontSize: '12px'
}
}
},
yAxis: {
min: 0, title: {text: false}
},
tooltip: {
//useHTML: true
},
plotOptions: {
},
'noData': '暂无数据'
},
xAxis: {},
yAxis: {
min: 0,
title: {
text: false
},
allowDecimals:false
},
legend: {enabled: true},
'series': [{
name: 'Tokyo',
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: 'New York',
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]
}],
'title': {
'text': ''
},
'credits': {
'enabled': false
},
'loading': false,
'size': {
'height': '500'
},
func: function (chart) {
// console.log('图表创建成功或数据变化:', chart);
}
}
}]);
说明:主要是要熟悉highcharts的API。这样就能事半功倍的开发出炫丽的图表。