在AngularJS中的使用Highcharts图表控件
一、Highcharts简介
Highcharts是一款非常好用的前端图表控件，正如其中文网介绍的那样：功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库。
如果你的项目是基于jquery的，那么你可以轻松的把它拿过来使用，直接在页面中引入js文件并按照官方的API文档进行配置即可。下面提供了Highcharts的中英文官网：
(1) Highcharts英文网：http://www.highcharts.com/
(2) Highcharts中文网：http://www.hcharts.cn/
二、在AngularJS中使用Highcharts
如果你的项目是基于AngularJS的，同时也想在项目中使用Highcharts，那么就需要按照AngularJS的方法将jquery的Highcharts封装成指令的形式，下面介绍具体流程：
(1) 下载highcharts-ng.js文件
大家可以去https://rawgit.com/pablojim/highcharts-ng/v0.0.1/src/directives/highcharts-ng.js 上将代码保存名为highcharts-ng.js文件即可。此文件实现的功能即是将Highcharts封装成了AngularJS的自定义指令。
(2) 页面中引入js文件
这里需要注意的是在页面中我们需要同时引入highcharts.js和highcharts-ng.js，注意先后顺序。
<script type="text/javascript" src="../../static/src/tool/angular/angular.min.js?v=201511301743"></script> <script type="text/javascript" src="../../static/src/tool/highcharts/highcharts.js?v=201511301743"></script> <script type="text/javascript" src="../../static/src/tool/highcharts/highcharts-ng.js?v=201511301743"></script>
(3) 加载highcharts-ng模块依赖，如下：
var myApp = angular.module('myChart',["highcharts-ng"]);
(4) 页面绘图区域添加<highchart>标签
<div class="container-fluid" ng-controller="BigChart as vm"> <highchart class="chart-container-big" title='vm.charts.title' series="vm.charts.series" options="vm.charts.options"> </highchart> </div>
(5) js文件配置数据
一般我们的数据都是从服务器端获取的，这里方便演示所以直接写死在js里了，如下：
myApp.controller('BigChart', function() {
var vm = this;
vm.charts = {
options: {
chart: {
type: 'line',
zoomType: 'x'
},
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M:%S',
valueDecimals: 2
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
hour: '%H:%M'
},
minRange: 1000, // 不能放大超过1s
minTickInterval: 1000 // 放大间隔最小为1s
}
},
series: {
data: [100.0, 99.0, 100.0, 98.039216, 100.0, 99.0, 100.0, 100.0, 100.0, 100.0, 97.087379, 99.0, 99.009901, 100.0, 99.0, 100.0, 99.009901, 100.0, 100.0, 98.039216, 100.0, 100.0, 100.0, 99.009901, 99.009901, 100.0, 99.009901, 100.0, 99.0, 100.0, 100.0, 99.0, 100.0, 99.009901, 100.0, 99.0, 99.0, 99.009901, 99.009901, 100.0, 100.0, 99.009901, 100.0, 99.009901, 100.0, 99.0, 98.039216, 100.0, 99.0, 100.0, 99.0, 100.0, 100.0, 100.0, 100.0, 100.0, 99.0, 100.0, 100.0],
name: '192.168.17.136'
},
title: {
text: null
}
}
}
这里的配置项可以完全使用highcharts官方的API，唯一的区别在于多了一层option属性，除了series及title属性外基本都应该放置于option内。
（6）页面呈现
最后的对应的效果图如下：