使用Chart.js构建折线图时遇Cannot read properties of null错误

1. 确认DOM元素是否正确获取 #

报错本质是你尝试读取一个null对象的labels属性，首先检查canvas元素的获取逻辑：

• 核对canvas标签的id拼写，确保和代码中getElementById的参数完全一致
• 避免在DOM未加载完成时执行图表初始化，把代码放到DOMContentLoaded回调里或者页面最底部：

document.addEventListener('DOMContentLoaded', function() {
  // 图表初始化代码写在这里
});

2. 确保数据赋值时机正确 #

既然服务器返回的日期数组正常，要确认初始化图表时数据已经被正确传递给labels：

• 如果用异步请求（fetch/axios）拿数据，必须把图表初始化放在请求成功的回调里，不能提前执行：

fetch('/api/your-data-api')
  .then(res => res.json())
  .then(remoteData => {
    // 先打印验证数据
    console.log('服务器返回的日期数组:', remoteData);
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: remoteData, // 确保这里的remoteData是有效数组而非null
        datasets: [{
          // 你的数据集配置
        }]
      }
    });
  });

3. 检查数据提取逻辑 #

如果服务器返回的是嵌套结构（比如{ dateList: ['2024-01-01', ...] }），要确保你提取了正确的字段作为labels，而不是直接把整个响应对象赋值过去。

4. 排查DOM元素的动态变化 #

如果页面有路由切换、tab切换这类操作，要确认初始化图表时，目标canvas元素仍然存在于DOM中，没有被动态移除或替换。

内容的提问来源于stack exchange，提问作者MR. potato35