一费封、Highcharts簡介

Highcharts是一款非常好用的前端圖表控件，正如其中文網(wǎng)介紹的那樣：功能強大拴事、開源沃斤、美觀圣蝎、圖表豐富刃宵、兼容絕大多數(shù)瀏覽器的純js圖表庫。
如果你的項目是基于jquery的徘公，那么你可以輕松的把它拿過來使用牲证，直接在頁面中引入js文件并按照官方的API文檔進行配置即可。下面提供了Highcharts的中英文官網(wǎng)：
(1) Highcharts英文網(wǎng)： http://www.highcharts.com/
(2) Highcharts中文網(wǎng)： 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文件即可捂齐。此文件實現(xiàn)的功能即是將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) 頁面繪圖區(qū)域添加<highchart>標(biāo)簽

 <highchart class="chart-container-big" title='vm.charts.title' series="vm.charts.series" options="vm.charts.options"> </highchart>
</div>```
######(5) js文件配置數(shù)據(jù)

一般我們的數(shù)據(jù)都是從服務(wù)器端獲取的压真，這里方便演示所以直接寫死在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'             : 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滴肿，唯一的區(qū)別在于多了一層option屬性，除了series及title屬性外基本都應(yīng)該放置于option內(nèi)泼差。
 [http://www.cnblogs.com/luozhihao/p/5065935.html ](http://www.cnblogs.com/luozhihao/p/5065935.html%20)