如果你的项目是基于jquery的，那么你可以轻松的把它拿过来使用，直接在页面中引入js文件并按照官方的API文档进行配置即可。下面提供了Highcharts的中英文官网：
如果你的项目是基于AngularJS的，同时也想在项目中使用Highcharts，那么就需要按照AngularJS的方法将jquery的Highcharts封装成指令的形式，下面介绍具体流程：
大家可以去https://rawgit.com/pablojim/highcharts-ng/v0.0.1/src/directives/highcharts-ng.js 上将代码保存名为highcharts-ng.js文件即可。此文件实现的功能即是将Highcharts封装成了AngularJS的自定义指令。
var myApp = angular.module(‘myChart‘,["highcharts-ng"]);
class="container-fluid" ng-cOntroller="BigChart as vm">
class="chart-container-big" title=‘vm.charts.title‘ series="vm.charts.series" optiOns="vm.charts.options">
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内。
京公网安备 11010802041100号