利用highcharts来实现动态交互图,通过定时任务,每隔一段时间塞入新的数据,且保持显示的数据量不变;
再根据显示的数据来动态调整坐标Y轴的上下限,使图表能显示的更符合要求。
Highcharts.setOptions({
global: {
useUTC: false
}
});
//最大最小值初始化
var intMinmun = 2;
var intMaxmun = 10;
function activeLastPointToolip(chart) {
var points = chart.series[0].points;
chart.tooltip.refresh(points[points.length -1]);
}
var chart = Highcharts.chart('container', {
chart: {
type: 'spline',
marginRight: 10,
events: {
load: function () {
var series = this.series[0],
chart = this;
activeLastPointToolip(chart);
setInterval(function () {
var x = (new Date()).getTime(), // 当前时间
y = Math.random()*10+5; // 随机值
if(intMinmun > y){
//动态修改Y轴的最小值
chart.yAxis[0].update({min:y});
intMinmun = y;
}
if(intMaxmun < y){
//动态修改Y轴的最大值
chart.yAxis[0].update({max:y});
intMaxmun = y;
}
series.addPoint([x, y], true, true);
activeLastPointToolip(chart);
}, 1000);
}
}
},
title: {
text: '动态模拟实时数据'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
min:intMinmun,
max:intMaxmun,
title: {
text: null
}
},
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: {
enabled: false
},
series: [{
name: '随机数据',
data: (function () {
// 生成随机值
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
var mvalue = Math.random()*10+5;
data.push({
x: time + i * 1000,
y: mvalue
});
//比较最大最小值,并重新赋值
if(intMinmun > mvalue){
intMinmun = mvalue;
}
if(intMaxmun < mvalue){
intMaxmun = mvalue;
}
}
return data;
}())
}]
});