highcharts-ng 的git地址:https://github.com/pablojim/highcharts-ng
我这里使用的npm:
npm install highcharts-ngHTML代码片段:
<div ng-app="myApp"> <div ng-controller="MyCtrl"> <highchart config="chartConfig"></highchart> </div></div>
引入相应的js文件:
<script src="js/jquery.js"></script><script src="js/angular.js"></script><script src="js/highcharts.js"></script><script src="js/highcharts-ng.js"></script>
编写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。这样就能事半功倍的开发出炫丽的图表。
新闻热点
疑难解答