ChartJs 柱状图不显示问题：已获取合法数据但无柱状条渲染故障求助

问题根因 #

• 数据处理逻辑错位：接口返回数据的解析赋值逻辑被放在了setInterval回调中，但barChartRender内部的异步请求成功回调执行时机晚于变量读取时机，首次渲染时labelsP、stundenProjekt均为未定义状态。
• 标签变量引用错误：图表更新逻辑中给X轴标签赋值的newLabelsArray是从未声明赋值的变量，值为undefined，导致X轴无标签、柱状条无对应坐标无法渲染。
• 全局XMLHttpRequest实例复用可能导致多次请求的响应状态错乱。

修复方案 #

调整数据解析逻辑的位置，修正标签变量引用，建议每次请求新建独立的XMLHttpRequest实例，修正后的完整JS代码如下：

let barChartProjekt;
const url = 'https://sample-url.de/'; 
const chart = document.getElementById("bar-chart-projekt");
// 注册插件只需执行一次，不用每次渲染重复注册
Chart.register(ChartDataLabels);

window.onload = function() {
  barChartRender(); // 首次渲染
  setInterval(barChartRender, 60000); // 每60秒刷新一次
};  

let barChartRender = () => {
  // 每次请求新建实例，避免状态冲突
  let http = new XMLHttpRequest();
  http.open("GET", url);
  http.setRequestHeader('key', 'sample-key'); 

  http.onload = () => {
    // 数据解析逻辑移到请求成功回调内，保证拿到最新响应数据
    const serverData = JSON.parse(http.responseText);
    const stundenProjekt = serverData.abzurechnen.nachProjekt.map((s) => {
      return s.second.summe;
    });
    const labelsP = serverData.abzurechnen.nachProjekt.map((p) => {
      return p.first;
    });

    const data = {
      labels: labelsP,
      datasets: [
        {
          backgroundColor: ["#3e95cd"],
          data: stundenProjekt
        }
      ]
    };

    if (barChartProjekt) {
      // 直接用正确的labelsP更新标签，不要用未定义的newLabelsArray
      barChartProjekt.data.labels = labelsP;
      data.datasets.forEach((ds, i) => {
        barChartProjekt.data.datasets[i].data = ds.data;
      })
      barChartProjekt.update();
    } else {
      barChartProjekt = new Chart(chart, {
        type: 'bar',
        data: data,
        options: {
          plugins: {
            legend: { display: false },
            title: {
              display: true,
              text: 'Projekte'
            }
          },
          // 可选：X轴标签过长可配置自动换行或倾斜，避免显示不全
          scales: {
            x: {
              ticks: {
                maxRotation: 45,
                minRotation: 45
              }
            }
          }
        }
      });
    }
  };
  http.send();
};

额外优化说明 #

如果X轴标签过长显示不全，可以通过上述代码中新增的scales.x.ticks配置项调整标签倾斜角度，优化显示效果。

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