Chart.js多数据集图表更新出现空白区域的解决咨询

你每次调用addDataComp时都会往chart.data.labels里新增一个标签，但最后只调用一次removeData移除一条数据。这导致标签的数量远多于每个数据集的数据点数量，图表为了适配多余的标签就会出现空白区域。

另外，多数据集图表的x轴标签应该是统一的（比如时间序列的时间戳），你用'wind'/'solar'/'hydro'作为标签是不合理的——这些文本更适合作为数据集的名称，而非x轴分类标识。

1. 重构数据更新逻辑 #

每个更新周期只添加一个统一标签，同时给三个数据集分别补充对应数据，最后统一更新图表并移除旧数据，确保标签和所有数据集的数据点数量始终一致。

2. 修改代码示例 #

首先调整addDataComp函数，去掉重复的标签添加和图表更新操作：

// 仅给指定数据集添加数据，不处理标签和图表更新
function addDataComp(chart, datasetIndex, newData) {
  chart.data.datasets[datasetIndex].data.push(newData);
}

然后重构数据更新的主逻辑：

// 生成统一的x轴标签（可替换为时间戳、循环索引等符合业务的标识）
const newLabel = `数据点 ${windArrayIndex}`;

// 给三个数据集分别添加对应数据
addDataComp(renewableChart, 1, windArray[windArrayIndex]);
addDataComp(renewableChart, 0, solarArray[solarArrayIndex]);
addDataComp(renewableChart, 2, hydroArray[hydroArrayIndex]);

// 添加统一标签
renewableChart.data.labels.push(newLabel);

// 更新数组索引（简化写法）
windArrayIndex = (windArrayIndex + 1) % windArray.length;
solarArrayIndex = (solarArrayIndex + 1) % solarArray.length;
hydroArrayIndex = (hydroArrayIndex + 1) % hydroArray.length;

// 移除最旧的一条数据（标签和所有数据集的数据都要同步移除）
function removeData(chart) {
  chart.data.labels.shift();
  chart.data.datasets.forEach(dataset => {
    dataset.data.shift();
  });
}
removeData(renewableChart);

// 最后统一更新图表一次
renewableChart.update();

3. 关键注意事项 #

• 必须保证removeData函数同时移除x轴标签和所有数据集的旧数据，否则标签与数据点数量不匹配的问题会持续存在。
• 多数据集共享同一组x轴标签是Chart.js正常渲染的基础，不要为每个数据集单独添加不同标签。

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