Chart.js简单图表数据更新失败问题求助

我懂这种代码看起来逻辑全对，但就是不生效的憋屈感😅 咱们直接揪出问题根源：

你创建Chart实例的时候，没有把它赋值给myChart变量，直接写了new Chart(ctx, {...})，导致后面调用addData(myChart, '6AM', 32)时，myChart这个变量根本不存在，数据更新的逻辑自然没法执行。

解决办法超简单： #

把Chart实例赋值给myChart变量就行，修改这一行代码：

// 原来的代码是直接new Chart，现在改成赋值给myChart
const myChart = new Chart(ctx, {
  // 以下是你原有的图表配置，保持不变
  type: 'line',
  data: {
    labels: ['12AM', '1AM', '2AM', '3AM', '4AM', '5AM'],
    datasets: [{
      label: 'Temperature',
      data: [43, 46, 55, 65, 56, 44],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

这样myChart就明确指向了你的图表实例，addData函数就能正确操作数据并更新图表了。

完整修正后的代码： #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Our First Line Chart</title>
</head>
<body>
  <div style="width: 900px; height: 400px;">
    <canvas id="myChart"></canvas>
  </div>
    
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    const ctx = document.getElementById('myChart');
    
    // 关键修改：将Chart实例赋值给myChart变量
    const myChart = new Chart(ctx, {
      type: 'line',
       data: {
          labels: ['12AM', '1AM', '2AM', '3AM', '4AM', '5AM'],
          datasets: [{
            label: 'Temperature',
            data: [43, 46, 55, 65, 56, 44],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
      function addData(chart, label, newData) {
        chart.data.labels.push(label);
        chart.data.datasets.forEach((dataset) => {
        dataset.data.push(newData);
       });

      chart.update();
      };
    addData(myChart, '6AM', 32);
  </script> 
</body>
</html>

现在再运行代码，就能看到图表成功添加6AM的温度数据啦~

备注：内容来源于stack exchange，提问作者Steve Cole