/**
* 加载动态刷新图表
*
* @param id
* 图表所在div的id
* @param title
* 图表标题文字
* @param yTitle
* 图表y轴显示的文字
* @param seriesName
* 鼠标悬停到图表中的点时显示的名称
* @param value
* 图表动态取的值
* @param switch
* 图表加载开关
*
*/
function loadHighcharts(id, title, yTitle, seriesName, value, switch) {
Highcharts.setOptions({
global : {
useUTC : false
}
});
var chart;
$('#' + id).highcharts(
{
chart : {
type : 'spline',
animation : Highcharts.svg,
marginRight : 20,
events : {
// 加载完成后开始绘制接下来的点
load : function() {
var series = this.series[0];
setInterval(function() {
if (switch) { // 如果动态刷新开关打开
refreshInfo(); // 请求指定action刷新信息
if ($("#flag").val() == 1) {
var timestr = $("#time").val().toString(); // 取得时间的字符串
var x = timestr * 1; // 将字符串转换为数字
var y = value;
series.addPoint([ x, y ], true, true); // 添加点
}
}
}, 1000);
}
}
},
title : {
color: '#FF00FF',
text : title,
float : false
},
xAxis : {
type : 'datetime',
tickPixelInterval : 150
},
yAxis : {
floor : 0,
ceiling : 100,
tickPositions : [ 0, 25, 50, 75, 100 ],
title : {
text : yTitle
},
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, 10);
}
},
legend : {
enabled : false
},
exporting : {
enabled : false
},
series : [ {
name : seriesName,
data : (function() { // 取得所要显示的时间,往前显示20个点
var data = [], time = $("#time").val().toString(), i;
time = time * 1;
for (i = -19; i <= 0; i++) {
data.push({
x : time + i * 2000,
y : 0
});
}
return data;
})()
} ]
});
}
Highcharts动态刷新图表
最新推荐文章于 2020-08-11 20:32:22 发布