我是 JavaScript 和 jQuery 的新手。我想创建多个实时图表,所以在谷歌搜索后我发现我可以使用 canvasjs 实现这一点。我创建了三个不同的 JavaScript 函数,以在单个 jsp 中包含三个不同的图形,并且每个函数轮询到一个单独的 servlet 以获取数据。随着数据点开始在数据系列中累积,我的 UI 卡住并变慢。我究竟做错了什么?绘制实时数据的正确结构应该是什么?对此主题的任何帮助将不胜感激。
我也在发布我的 JavaScript 函数。
function load_A(){
var dps = []; //dataPoints.
jQuery.post("Update_A").done(function(responseJson) {
jQuery.each(responseJson, function(key, value) {
dps.push({
x : new Date(key),
y : value,
// label : key
});
alert(key + " " + value);
});
var chart = new CanvasJS.Chart("chartContainer_A", {
zoomEnabled : true,
backgroundColor : "black",
title : {
text : "POC_A",
fontColor : "red",
fontSize : 24,
fontFamily : "TimesNewRoman",
fontWeight : "bolder",
padding : 10
},
axisX:{
title : "Time",
titleFontWeight: "bolder",
titleFontColor: "red",
lineThickness: 3,
lineColor: "lightgreen",
// gridThickness: 0.25,
gridColor: "orange",
gridDashType: "dash",
labelFontColor: "lightgreen",
// interlacedColor: "#191919" ,
intervalType: "second",
interval: 1,
valueFormatString: "hh:mm:ss",
},
axisY : {
title : "Random no.",
titleFontWeight: "bolder",
titleFontColor: "red",
lineThickness: 5,
lineColor: "lightgreen",
// gridThickness: 0.25,
gridColor: "orange",
gridDashType: "dash",
labelFontColor: "lightgreen"
},
data : [ {
type : "line",
xValueType : "dateTime",
dataPoints : dps
} ]
});
chart.render();
function poll_A() {
jQuery.ajax({
url : "Update_A",
type : "POST",
success : function(data) {
jQuery.each(data, function(key, value) {
dps.push({
x : new Date(key),
y : value
});
chart.render();
chart.options.title.text = "POC_A " + value;
});
},
dataType : "json",
complete : function() {
setTimeout(poll_A,1000);
},
timeout: 2000
});
}
poll_A();
});
}