Chart.js：從canvas獲取圖表數據

Question

我有幾個 Chart.js 圖表，我可能需要稍后更新。

是否可以在我需要更新圖表時從 canvas 元素中提取 myChart object？ 或者我是否必須在全局 scope 中保存每個 myChart object？

for(var i=1; i<=5; i++) {
  createChart(i);
}

function createChart(i) {
  var $chart = $('<canvas id="chart-' + i + '" width="400" height="400"></canvas>').appendTo('body');
  var myChart = new Chart($chart, {
    data: {
      datasets: [{
          data: [Math.random(), Math.random(), Math.random(), Math.random()]
      }]
    }
  });
}

現在是一些偽代碼，我想稍后如何更新圖表 2：

var updateChart = $('#chart-2'); // This is where I'd need to get the chart data from the canvas element

updateChart.data.datasets[0].data = updateChart.data.datasets[0].data.push(Math.random());

updateChart.update();

Answer 1

Chart.helpers.each(Chart.instances, function(instance){
    console.log(instance);
});

更新： https : //jsfiddle.net/furd1L27/14/

Answer 2

ChartJS API 實際上提供了getChart方法來做你想做的事：

let chart = Chart.getChart('chart-2'); // Select by canvas ID
// OR
let canvas = document.querySelector('#chart-2')
let chart = Chart.getChart(canvas); // Select using the canvas element

// You can now update your chart
chart.data.datasets[0].data = newData;
chart.data.labels = newLabels;
chart.update();

Answer 3

我建議將所有發送到圖表的數據存儲在數組中。 數組更新后，您可以發送：

HTTP/AJAX/SOCKET.IO

向客戶端指示，並更新圖表。