AngularJS在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)页面显示

AngularJS,最终的相应的功力图如下:

 AngularJS 1

 

相关文章