Данные веб-обозревателя для обновления диаграммы ChartJs

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:

Calling update() на вашем экземпляре Chart будет вновь сделать диаграмму с любыми обновленными значениями, что позволяет редактировать значение нескольких существующих точек, то их рендеринг в одном анимационной визуализацию цикла.

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.