星空网 > 软件开发 > Java

在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='/images/loading.gif' data-original="../../static/src/tool/angular/angular.min.js?v=201511301743"></script><script type="text/javascript" src='/images/loading.gif' data-original="../../static/src/tool/highcharts/highcharts.js?v=201511301743"></script><script type="text/javascript" src='/images/loading.gif' data-original="../../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中的使用Highcharts图表控件

 

原创文章,转载请注明来自一个萝卜一个坑 -博客园[http://www.cnblogs.com/luozhihao]

本文地址:http://www.cnblogs.com/luozhihao/p/5065935.html 




原标题:在AngularJS中的使用Highcharts图表控件

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

国际货运航线有哪些:https://www.goluckyvip.com/tag/101316.html
巴林国际物流:https://www.goluckyvip.com/tag/101317.html
中东国际物流:https://www.goluckyvip.com/tag/101318.html
国际快递费:https://www.goluckyvip.com/tag/101319.html
跨境HenryDon:https://www.goluckyvip.com/tag/10132.html
寄化工品国际快运:https://www.goluckyvip.com/tag/101320.html
请问西安及周边5日游怎么安排?:https://www.vstour.cn/a/364173.html
图策全国免景点门票 预订景区门票优惠:https://www.vstour.cn/a/364174.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流