如何在 Chart.js 堆叠条形图中实现分组与去重图例标签

本文详解如何通过合理组织数据集和配置堆叠选项，在 Chart.js 中构建按年份分组、按动物类型堆叠的条形图，并避免图例标签重复，最终呈现清晰的 dogs、cats、2024、2024 四类独立标签。

本文详解如何通过合理组织数据集和配置堆叠选项，在 Chart.js 中构建按年份分组、按动物类型堆叠的条形图，并避免图例标签重复，最终呈现清晰的 `dogs`、`cats`、`2024`、`2024` 四类独立标签。

在 Chart.js 里做“按年份分组 + 按类型堆叠”的条形图时，很多人一开始都会踩进同一个坑：把同一种类型（比如 "dogs"）拆成多个 dataset，分别去对应不同年份。结果就是，图例里会反复出现同样的 "dogs" 标签。原因其实不复杂——Chart.js 生成图例项时，默认看的是 dataset.label，并不会按照你理解中的语义关系自动做聚合。

正确解法在于分离维度职责：

• X 轴（分组维度）：代表时间单位（如月份），需启用 scales.x.stacked = true 实现同月多组并列；
• 堆叠逻辑（Y 轴）：同一 stack ID 下的 dataset 在 Y 方向累加，因此应让每个 年份 对应一个独立 stack（如 "2024"、"2024"）；
• 图例标签（语义维度）：每个 dataset 的 label 应唯一标识其 类型+年份组合（如 "dogs 2024"），但若需仅显示 dogs/cats/2024/2024 四个标签，则必须借助图例 plugins.legend.labels.filter 进行动态过滤。

以下是推荐的完整实现方案：

✅ 正确的数据结构设计

每个 dataset 表示「某一年份下某一类型」的完整月度数据，stack 按年份设置，确保同一年份内不同类型垂直堆叠：

const data = {
labels: ["January", "February", "March"],
datasets: [
{
label: "dogs 2024",
data: [12, 6, 2],
stack: "2024",
backgroundColor: "rgba(54, 162, 235, 0.6)"
},
{
label: "cats 2024",
data: [2, 5, 7],
stack: "2024",
backgroundColor: "rgba(255, 99, 132, 0.6)"
},
{
label: "dogs 2024",
data: [2, 20, 5],
stack: "2024",
backgroundColor: "rgba(54, 162, 235, 0.3)"
},
{
label: "cats 2024",
data: [8, 12, 9],
stack: "2024",
backgroundColor: "rgba(255, 99, 132, 0.3)"
}
]
};

✅ 关键配置：启用双堆叠 + 自定义图例

const config = {
type: "bar",
data: data,
options: {
responsive: true,
scales: {
x: { stacked: true },// 同一月份显示多个年份组（横向分组）
y: { stacked: true } // 同一年份内类型纵向堆叠（纵向累加）
},
plugins: {
legend: {
labels: {
// 动态过滤图例：只保留唯一单词（dogs/cats/2024/2024）
filter: (item) => {
const parts = item.text.split(" ");
return parts.length === 1 || 
 (parts.length === 2 && ["2024","2024"].includes(parts[1]));
},
// 可选：自定义生成逻辑，确保四类标签明确
generateLabels: (chart) => {
const uniqueTypes = new Set();
const uniqueYears = new Set();

chart.data.datasets.forEach(ds => {
const [type, year] = ds.label.split(" ");
if (type) uniqueTypes.add(type);
if (year && /^d{4}$/.test(year)) uniqueYears.add(year);
});

return Array.from(uniqueTypes).map(t => ({
text: t,
fillStyle: 'black',
fontColor: 'black',
hidden: false
})).concat(
Array.from(uniqueYears).map(y => ({
text: y,
fillStyle: 'black',
fontColor: 'black',
hidden: false
}))
);
}
}
}
}
}
};

⚠️ 注意事项：

• generateLabels 返回的数组会完全替代默认图例，需手动构造所有期望标签（含颜色、状态等），适合强控制场景；
• filter 更轻量，适用于从现有 label 中筛选，但需确保原始 label 格式可解析（如 "dogs 2024"）；
• 动态数据场景下，建议在构建 datasets 前预处理：提取唯一 types 和 years，再用嵌套循环生成 dataset，保证结构可扩展；
• 颜色建议按类型固定（如 dogs 始终用蓝色系），年份通过透明度或亮度区分，提升可读性。

最终效果：X 轴每月显示两个并列柱（2024 和 2024），每根柱内又分为 dogs/cats 两段堆叠，图例仅显示四个无重复标签——真正实现语义清晰、结构灵活、可维护性强的专业图表。