Chart.js：从canvas获取图表数据

Question

我有几个 Chart.js 图表，以后可能需要更新。

当我需要更新图表时，是否可以从canvas元素中提取myChart对象？或者我是否必须在全局范围内保存每个 myChart 对象？

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

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();