如何在JavaScript DOM中获取动态渲染的Chart.js Chart对象以实现图表更新？

嘿，这个场景我太熟悉了！之前做数据看板的时候也遇到过大量动态图表需要更新的情况，Chart.js其实早就为这种需求提供了官方的解决方案，完全不用纠结没提前存储Chart实例的问题。

核心思路：用官方方法直接从Canvas获取实例 #

从Chart.js v3版本开始，官方提供了Chart.getChart()这个实用方法——它可以直接通过Canvas元素本身或者Canvas的ID字符串，返回对应的Chart实例。如果Canvas上没有渲染过图表，它会返回undefined，所以用的时候加个判断就很稳妥。

举个最基础的例子：
假设你的某个图表渲染在ID为user-behavior-chart的Canvas上，要更新它的话可以这么写：

// 方式1：通过Canvas ID获取实例
const chartInstance = Chart.getChart('user-behavior-chart');

// 方式2：先拿到DOM元素再获取实例
const canvas = document.getElementById('user-behavior-chart');
const chartInstance = Chart.getChart(canvas);

// 确认实例存在后再更新，避免报错
if (chartInstance) {
  // 如果需要更新数据，先修改数据再调用update
  chartInstance.data.datasets[0].data = [15, 28, 32, 45];
  chartInstance.update();
}

应对大量动态新增图表的场景 #

因为你的页面会持续新增图表，建议给每个图表的Canvas元素设置唯一标识（比如自定义属性data-chart-key或者唯一ID），这样后续要更新时能精准定位到目标图表：

第一步：渲染图表时添加唯一标识 #

动态创建Canvas的时候，给它加个自定义属性来标记：

// 动态生成Canvas
const newChartCanvas = document.createElement('canvas');
// 用时间戳+业务标识生成唯一key，比如订单图表就加order前缀
newChartCanvas.dataset.chartKey = `order-chart-${Date.now()}`;
// 把Canvas加到页面里
document.getElementById('charts-container').appendChild(newChartCanvas);

// 直接渲染图表，不用存实例
new Chart(newChartCanvas, {
  type: 'bar',
  data: { /* 初始化数据 */ },
  options: { /* 图表配置 */ }
});

第二步：更新时通过标识定位并获取实例 #

当需要更新某个特定图表时，通过自定义属性找到对应的Canvas，再获取实例：

// 假设你要更新标识为order-chart-1698765432100的图表
const targetCanvas = document.querySelector('[data-chart-key="order-chart-1698765432100"]');
if (targetCanvas) {
  const chartInstance = Chart.getChart(targetCanvas);
  if (chartInstance) {
    // 更新数据并刷新图表
    chartInstance.data.labels = ['周一', '周二', '周三'];
    chartInstance.data.datasets[0].data = [200, 350, 420];
    chartInstance.update();
  }
}

兼容旧版本Chart.js（v2及更早） #

如果你的项目还在使用v2版本，Chart.getChart()方法还没出现，但Chart.js会把实例直接挂载到Canvas的chart属性上，你可以直接这么获取：

const canvas = document.getElementById('old-version-chart');
const chartInstance = canvas.chart;
if (chartInstance) {
  chartInstance.update();
}

这样不管是已有的还是后续新增的图表，都能随时通过对应的Canvas元素获取到实例并更新，完全不需要提前维护一个庞大的实例数组~

内容的提问来源于stack exchange，提问作者Rahul Hindocha