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

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

在 Chart.js 中实现「按年份分组 + 按类型堆叠」的条形图时，常见误区是将同一类型（如 "dogs"）重复定义为多个 dataset（分别对应不同年份），这会导致图例中出现重复的 "dogs" 标签——Chart.js 默认按 dataset.label 生成图例项，而非按语义逻辑聚合。

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

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

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

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

✅ 正确的数据结构设计

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

const data = {
  labels: ["January", "February", "March"],
  datasets: [
    {
      label: "dogs 2022",
      data: [12, 6, 2],
      stack: "2022",
      backgroundColor: "rgba(54, 162, 235, 0.6)"
    },
    {
      label: "cats 2022",
      data: [2, 5, 7],
      stack: "2022",
      backgroundColor: "rgba(255, 99, 132, 0.6)"
    },
    {
      label: "dogs 2023",
      data: [2, 20, 5],
      stack: "2023",
      backgroundColor: "rgba(54, 162, 235, 0.3)"
    },
    {
      label: "cats 2023",
      data: [8, 12, 9],
      stack: "2023",
      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/2022/2023）
          filter: (item) => {
            const parts = item.text.split(" ");
            return parts.length === 1 || 
                   (parts.length === 2 && ["2022","2023"].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 2022"）；
• 动态数据场景下，建议在构建 datasets 前预处理：提取唯一 types 和 years，再用嵌套循环生成 dataset，保证结构可扩展；
• 颜色建议按类型固定（如 dogs 始终用蓝色系），年份通过透明度或亮度区分，提升可读性。

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