HTML Canvas - 定期更新画布

时间:2013-10-29 14:56:41

标签: html canvas

我有一个画布,我用它来定期绘制一个情节。我有一个定期接收数据的函数,它解析数据并在画布上绘制它。对于绘图,我使用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;

大多数代码与我的问题无关,但我只是想知道我处理的方式是否有问题。

谢谢。

0 个答案:

没有答案