Chart.js多图表更新异常求助：调用addData后图表内容一致

核心问题分析 #

你遇到的三个数据集内容完全一致的问题，主要由以下几个逻辑错误导致：

1. 重复添加标签且格式错误
   三次调用addData时，每次都执行chart.data.labels.push([Generation])，把数组作为单个元素塞进labels，最终labels数组会变成[[Generation], [Generation], [Generation]]——这不符合Chart.js对标签的一维数组要求，同时导致三个重复标签，数据点对应逻辑混乱。
2. 数据更新逻辑错位
   你期望同一Generation对应三个数据集的数值，但当前代码分三次调用addData，每次只给一个数据集加数据，同时每次新增一个标签。最终每个数据集只有一个数据点，且对应不同的标签位置，视觉上呈现出内容一致的假象。
3. 冗余的变量定义
   第三次调用时重复定义了birdCountST，数值和第二次完全相同，直接导致第三个数据集的数据和第二个完全一致。

修复方案 #

方案一：直接调整更新逻辑（最简洁）

一次性完成标签添加和三个数据集的数据更新，再统一刷新图表：

// 获取所有统计值
const birdCount = document.getElementsByClassName("bird").length;
const birdCountST = document.getElementsByClassName("bird11").length + document.getElementsByClassName("bird12").length;
// 这里假设你第三次需要不同的数值，如果不是，自行修改计算逻辑
const birdCountThird = document.getElementsByClassName("xxx").length; // 替换成实际的类名

// 仅添加一次标签（注意：Generation应为字符串/数值，不要传数组）
chart.data.labels.push(Generation);

// 给三个数据集分别添加对应数据
chart.data.datasets[0].data.push(birdCount);
chart.data.datasets[1].data.push(birdCountST);
chart.data.datasets[2].data.push(birdCountThird);

// 统一更新图表
chart.update();

方案二：重构addData函数（复用性更强）

如果需要保留函数式调用，可以修改addData支持批量更新多个数据集：

function addData(chart, label, datasetData) {
    // 添加单个标签（确保label是一维值，不是数组）
    chart.data.labels.push(label);
    // 遍历数据集，批量添加对应数据
    datasetData.forEach((data, idx) => {
        if (chart.data.datasets[idx]) {
            chart.data.datasets[idx].data.push(data);
        }
    });
    chart.update();
}

// 调用示例
const birdCount = document.getElementsByClassName("bird").length;
const birdCountST = document.getElementsByClassName("bird11").length + document.getElementsByClassName("bird12").length;
const birdCountThird = document.getElementsByClassName("xxx").length;

addData(chart, Generation, [birdCount, birdCountST, birdCountThird]);

额外注意事项 #

• 确认Generation变量是字符串或数值类型，不要传入数组，否则Chart.js无法正确渲染标签。
• 检查第三次统计的数值逻辑，如果确实需要和第二次不同，要修正对应的DOM元素选择逻辑。

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