//借鉴:https://www.hcharts.cn/demo/highcharts/dynamic-update(highChart官网Demo)
//作者qq:544462804
function activeLastPointToolip(chart) {
var points = chart.series[0].points;
chart.tooltip.refresh(points[points.length - 1]);
}
$('#chartscdll').highcharts({
chart: {
type: 'spline',
zoomType: "x",
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
ReloadPage();
var series = this.series[0],
chart = this;
var TimeData = "";
var Datas = "";
volValueInterval = setInterval(function () {
$.ajax({
url: "@(EBS.Common.Config.VirtualDirName)/TrafficParameter/GetVolDatas/",
type: "POST",
data: { "land": land, "cam": cam, "direction": direction, "limit": limitTime},
async: false,
success: function (data) {
if (data != "-1") {
var Anarray = data.split('|');
TimeData = eval('(' + Anarray[0] + ')');
Datas = eval('(' + Anarray[1] + ')');
limitTime = Anarray[2];
}
}
});
for (i = 0; i < Datas.length; i++) {
var times = new Date();
var timess = parseInt(TimeData[i]);
times.setTime(timess);
var x = times.getTime(),
y = Datas[i];
series.addPoint([x, y], true, false);
activeLastPointToolip(chart);
CollectGarbage();
}
}, 60000);//一分钟更新一次,从数据库拿值
}
}
},
title: {
text: '车道流量:辆',
},
xAxis: {
title: {
text: '(时间:h)'
},
type: 'datetime',
tickPixelInterval: 50,
labels: {
formatter: function () {
var vDate = new Date(this.value);
return vDate.getHours() + ":" + vDate.getMinutes() + ":" + vDate.getSeconds();
}
}
},
yAxis: {
title: {
text: '车道流量:辆'
},
},
plotOptions: {
series: {
cursor: 'pointer',
color: '#C0504D',
marker: {
enabled: false,//是否在实时图上一直显示点 true显示,false不显示
},
borderWidth: 0,
dataLabels: {
enabled: false,//是否在实时图上显示y轴数据
format: '{point.y:.0f}'
}
}
},
tooltip: {
formatter: function () {
return "<b>名称:" + this.series.name + "</b><br/>" +
"<b>日期:" + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '</b><br/>' +
"<b>数量:" + Highcharts.numberFormat(this.y, 0) + "辆</b>";
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: '车道流量',
data: (function () {
var data = [];
var TimeData = "";
var Datas = "";
$.ajax({
url: "@(EBS.Common.Config.VirtualDirName)/TrafficParameter/GetVolDatas/",
type: "POST",
data: { "land": land, "cam": cam, "direction": direction, "limit": limitTime},
async: false,
success: function (data) {
if (data != "-1") {
var Anarray = data.split('|');
TimeData = eval('(' + Anarray[0] + ')');
Datas = eval('(' + Anarray[1] + ')');
limitTime = Anarray[2];
}
}
});
if(Datas.length>0){
for (i = 0; i < Datas.length; i++) {
var times = new Date();
var timess = parseInt(TimeData[i]);
times.setTime(timess);
data.push([
times.getTime(),
Datas[i]
]);
}
}
CollectGarbage();
return data;
}())
}]
}, function (c) {
activeLastPointToolip(c);
});
HighChart动态交互实时刷新曲线图
最新推荐文章于 2024-03-21 17:04:36 发布