在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）頁面呈現

最后的對應的效果圖如下：