如何通过XMLHttpRequest每20秒定时更新ChartJS图表的数据源

问题原因 #

当前代码未生效的核心是dataLoop仅读取首次请求缓存的serverData变量，没有重新向服务器发起请求拉取最新数据，因此studenGesamt的值永远是首次请求返回的结果，不会更新。

修改方案 #

把请求逻辑封装为可复用的函数，每次定时任务触发时重新调用该函数拉取最新数据，拿到数据后更新变量并重渲染图表即可，修改后的代码如下：

let studenGesamt;
let date;
const url = 'https://url.com/'; 
const chart = document.getElementById("multie-pie-chart");

// 计算截至当日已过工作日数的函数
const workdaysCount = () => [...new Array(new Date().getDate())]
  .reduce((acc, _, monthDay) => {
    const date = new Date()
    date.setDate(1 + monthDay) 
    ![0, 6].includes(date.getDay()) && acc++
    return acc
  }, 0)

// 封装请求逻辑为独立函数，方便重复调用
const fetchServerData = () => {
  const http = new XMLHttpRequest();
  http.open("GET", url);
  http.setRequestHeader('key', 'sample-key');
  http.send();
  
  http.onload = (e) => {
    // 解析最新的服务器数据
    const serverData = JSON.parse(http.responseText);
    console.log(serverData);
    // 更新总工时变量
    studenGesamt = serverData.abzurechnen.gesamt;
    // 重渲染图表，让页面上的图表同步更新
    chartRender(); 
  };

  // 可选：添加错误处理，避免请求失败时报错
  http.onerror = () => {
    console.error('数据请求失败，请检查接口状态');
  }
}

// 页面加载后先请求一次数据渲染初始图表
fetchServerData();

// 启动定时任务，20秒请求一次新数据（测试阶段可以改为5秒）
setInterval(fetchServerData, 20000);

注意事项 #

• 若服务器接口有请求频率限制，不要把间隔设置得过短，20秒的请求频率对大部分业务场景都是合理的
• 如果ChartJS重复渲染出现异常，可以在chartRender函数中先销毁旧的图表实例再创建新实例，避免内存溢出
• 无需额外保留全局serverData变量，每次请求后直接使用本次返回的结果即可，减少全局变量污染

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