使用Chart.js构建折线图时数据无法显示问题求助

从数据接收、解析到变量使用的全流程逐一排查：

• 检查异步请求的执行顺序
  如果用fetch或axios发起请求，要确保在数据返回后再读取dates和coin_value。异步请求不会阻塞后续代码执行，若直接在请求外部打印变量，此时数据还未返回，必然输出null。
  错误示例：

  let dates = null;
  let coin_value = null;
  fetch('/api/chart-data')
    .then(res => res.json())
    .then(data => {
      dates = data.dates;
      coin_value = data.values;
    });
  console.log(dates, coin_value); // 先于回调执行，输出null
  

  正确写法：将数据处理和图表初始化放在回调或async/await函数内部

  async function initChart() {
    let dates = null;
    let coin_value = null;
    const response = await fetch('/api/chart-data');
    const data = await response.json();
    dates = data.dates;
    coin_value = data.values;
    console.log(dates, coin_value); // 此时能拿到正确数据
    // 在这里初始化Chart.js折线图
  }
  initChart();
  

• 验证服务器返回的数据结构
  打开浏览器开发者工具的「网络」面板，找到对应的API请求，查看响应体的键名是否和代码中匹配。比如你代码里读data.dates，但服务器返回的是data.dateList；或者键名大小写不匹配（服务器返回Dates，你读dates），都会导致读取结果为null。

• 排查变量作用域问题
  确认dates和coin_value的定义位置，如果是在请求回调的局部作用域内赋值，外部访问时变量依然是初始的null。比如：

  let dates = null;
  fetch('/api/chart-data')
    .then(res => res.json())
    .then(data => {
      let dates = data.dates; // 这里重新定义了局部变量，外部的dates不受影响
    });
  

• 检查数据解析方式
  如果服务器返回的是字符串格式的数组（比如"[\"2024-01-01\",\"2024-01-02\"]"），而非标准JSON数组，直接用res.json()解析会失败，导致数据为null。此时需要先转成字符串再解析：

  const rawText = await response.text();
  const data = JSON.parse(rawText);
  

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