1.引用
<script src="include/Highcharts-4.2.3/js/highcharts.js"></script>
2.创建charts
var chart;
$(document).ready(function(){
Highcharts.setOptions({
global: {
useUTC: false//是否使用世界标准时间
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load:addPoints();
}
},
title: {
text: '非连续时间折线图'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
//图例属性
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderWidth: 0
},
exporting: {
enabled: false
},
series: getData()
});
});
3.获取初始的series数据
function getData(){
var series=new Array();
$.ajax({
type: 'GET',
url: 'http://localhost:3000/highchats' ,
dataType: 'json',
async: false,
success: function(msg){
var myData=[];
for(var i=0;i<msg.length;i++){
myData.push({
x:getTimeStamp(msg[i].time),
y:msg[i].value,
});
}
series.push({"name":"test",data:myData});
},error:function(error){
alert("error"+error);
}
});
return series;
}
4.刷新series数据
function refreshSeries(){
chart.series[0].update(getData());
}
5.日期转timestamp
function getTimeStamp(strTime){
strTime = strTime.replace(/-/g,'/'); // 将-替换成/,因为下面这个构造函数只支持/分隔的日期字符串
var date = new Date(strTime);
return date.getTime();
}
6.动态添加数据
function addPoints(){
}