HTML画布-定期更新画布

我有一块画布，我用它定期画一个图。我有一个定期接收数据的函数，它解析数据并将其绘制在画布上。用于我使用的绘图

但我无法定期更新绘图。我已确认数据已正确接收和解析，但绘图未更新。当我单击页面时，或者当我最小化浏览器并再次将其最大化时，它会更新。绘图将短暂出现，下次调用update时，绘图将消失

这是我的密码。我正在使用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;

函数启动（）
{
//创建新的websocket并连接
window.ws=newwsimpl（'ws://localhost:8181/consoleappsample'，'my protocol'）；
//当从服务器提交数据时，调用此方法
ws.onmessage=函数（evt）
{
解析输入数据（evt.data）；
};
//建立连接后，将调用此方法
ws.onopen=函数（）
{
inc.innerHTML='Connected
'；
textPanel.style.background=“#00FF00”；
};
//当连接关闭时，调用此方法
ws.onclose=函数（）
{
inc.innerHTML='connectionclosed
'；
textPanel.style.background=“#FF0000”；
}
var periodicFuncID=setInterval（函数（）{ws.send（1）；}，2000）；
}
函数ParseIncomingData（数据）
{
var splitContents=data.split（'，'）；
var inc=document.getElementById（'incomming'）；
var xaxis=新数组（）；
var yaxis=新数组（）；
yaxis=拆分内容；
var dataType=yaxis.shift（）；
var数据；
对于（var i=1；iI）来说，我想知道您的数据刷新率，因为您建议（通过单击并调整大小实验）减速“有帮助”。因此，可能图表总是在刷新。要快速测试这一点，您只需定义一个全局oneOnTen整数计数器，然后在ParseIncomingData开始时：if（OneOnConference++%10！=0）返回；（例如）。谢谢你，游戏炼金术士。我尝试了你的方法，但得到了相同的结果。我尝试在画布上随机绘制矩形，发现当我有最后一行“var myLine=new Chart（ctx）。line（data）；”它不起作用。当我删除它时，它可以正常工作。也许Chart.js以某种方式使用画布上下文导致了它？建议您在应用程序启动时创建图表，然后只调用ChartObject.Line（data）；（每次都没有新的图表）