ChartJS折线图更新报错：Uncaught TypeError: my_Chart.data is undefined

错误原因 #

你之前通过画布是否为空判断实例存在性的逻辑不成立——页面上的<canvas>元素一直存在，但你可能没把创建后的Chart实例正确赋值给my_Chart变量，或者变量被意外重置为非Chart对象，导致访问my_Chart.data时出现undefined错误。

正确实现方案 #

核心思路是用一个持久化变量保存Chart实例，通过判断该变量是否为有效Chart实例来决定创建或更新操作：

1. 基础结构（页面已有无需修改）

<canvas id="myChart"></canvas>

2. 完整JS代码

// 在作用域内声明变量，持久化保存Chart实例
let myChartInstance = null;

// 封装创建/更新图表的通用函数
function handleChart(newData) {
  const ctx = document.getElementById('myChart').getContext('2d');

  // 判断是否存在有效Chart实例
  if (!myChartInstance || !(myChartInstance instanceof Chart)) {
    // 实例不存在，创建新折线图
    myChartInstance = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['一月', '二月', '三月', '四月', '五月'],
        datasets: [{
          label: '数据趋势',
          data: newData,
          borderColor: 'rgb(75, 192, 192)',
          tension: 0.1,
          fill: true
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: { beginAtZero: true }
        }
      }
    });
  } else {
    // 实例已存在，直接更新数据并刷新
    myChartInstance.data.datasets[0].data = newData;
    // 调用update方法触发图表重绘
    myChartInstance.update();
  }
}

// 调用示例
// 第一次执行：创建图表
handleChart([12, 19, 3, 5, 2]);
// 模拟后续更新：2秒后更新数据
setTimeout(() => handleChart([22, 29, 13, 15, 12]), 2000);

关键注意点 #

• 必须用变量持久化保存Chart实例，不能通过画布元素是否存在判断实例状态，二者是完全独立的对象
• 更新时直接操作实例的data属性，再调用update()方法即可，无需重新创建Chart实例
• 用instanceof Chart做类型校验，避免变量被意外赋值为其他类型导致判断失效

内容的提问来源于stack exchange，提问作者erik-stengel