Question

我正在尝试使用从Websocket返回的数据来更新图表，但是没有错误，图表没有被绘制。

var chartData = {
  labels: [], // currently empty will contain all the labels for the data points
  datasets: [
    {
      label: "Time",
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [] // currently empty will contain all the data points for bills
    }
  ]
};


var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx).Line(chartData);

websocket = new WebSocket("wss url");


websocket.onmessage = function(evt) { 

    var pjson = jQuery.parseJSON(evt.data);
    console.log(pjson);

    return(pjson);
    var sec_left = pjson.somedata;
    var now_str = pjson.somedata;

    if(now_str)
    {
       chartData.labels.push(somedata); 
    }
    if(sec_left)
    {
       chartData.datasets[0].data.push(somedata);
    }

};

但是这不会绘制图表，但是当我添加

时

var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx).Line(chartData);

在websocket.onmessage函数中，正在绘制图表，但是再次重绘整个图表，而不是使用新添加的数据更新图表。如何修复它以便更新图表不会从websocket的每个请求中完全重新绘制？

Answer 1

您需要使用update()方法重绘图表。来自Line Chart Methods上的文档：

在图表实例上调用update()将使用任何更新的值重新渲染图表，允许您编辑多个现有点的值，然后在一个动画渲染循环中渲染它们。
myLineChart.datasets[0].points[2].value = 50;
// Would update the first dataset's value of 'March' to be 50
myLineChart.update();
// Calling update now animates the position of March from 90 to 50.

Websocket数据更新ChartJs图表

1 个答案: