我有一个画布,我用它来定期绘制一个情节。我有一个定期接收数据的函数,它解析数据并在画布上绘制它。对于绘图,我使用Chart.js。
但我无法定期更新情节。我已确认数据已正确接收并已解析,但图表未更新。当我单击页面时,或者如果我最小化浏览器并再次最大化它,它会更新。该图将短暂出现,下次更新时,情节消失。
这是我的代码。我正在使用Firefox。
function start ()
{
// create a new websocket and connect
window.ws = new wsImpl('ws://localhost:8181/consoleappsample', 'my-protocol');
// when data is comming from the server, this metod is called
ws.onmessage = function (evt)
{
ParseIncomingData(evt.data);
};
// when the connection is established, this method is called
ws.onopen = function ()
{
inc.innerHTML = 'Connected<br/>';
textPanel.style.background = "#00FF00";
};
// when the connection is closed, this method is called
ws.onclose = function ()
{
inc.innerHTML = 'Connection closed<br/>';
textPanel.style.background = "#FF0000";
}
var periodicFuncID = setInterval( function() { ws.send(1); }, 2000);
}
function ParseIncomingData(data)
{
var splitContents = data.split(',');
var inc = document.getElementById('incomming');
var xaxis = new Array();
var yaxis = new Array();
yaxis = splitContents;
var dataType = yaxis.shift();
var data;
for(var i=1; i<=yaxis.length; i++)
{
xaxis.push(i);
}
data =
{
labels : xaxis,
datasets : [
{
//fillColor : "rgba(135,206,250,0.5)",
fillColor : "rgba(0,0,0,0.4)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(255,165,0,1)",
pointStrokeColor : "#585858 ",
data : yaxis
}
]
}
var canvas= document.getElementById('Plot');
var ctx = canvas.getContext("2d");
var myLine = new Chart(ctx).Line(data);
}
window.onload = start;
大多数代码与我的问题无关,但我只是想知道我处理的方式是否有问题。
谢谢。