Chart.js堆叠柱状图布局异常：单柱与堆叠柱共存问题

问题背景 #

需要构建包含两类柱状图的图表：

• 单条独立柱状图：「前年電力量」（上年总耗电量）
• 堆叠柱状图：「予想電力量」（本年预计耗电量）及其细分分类（空調、照明、冷ケース、その他）
  当前添加「前年電力量」数据集后，排序与堆叠逻辑出现异常；移除该数据集时布局恢复正常，目标是实现12个月的统一正确布局。

修复方案 #

核心是通过stack和order属性的正确配置，实现两组柱状图的并列显示，同时保证本年数据的堆叠逻辑正常：

• 为「前年電力量」分配独立的stack值，与本年堆叠组区分开
• 调整order属性控制渲染顺序，确保两组柱状图并列而非堆叠
• 统一所有数据集的barPercentage，避免宽度不一致
• 移除冗余的grouped配置（Chart.js中该属性仅在特定场景生效，此处无需设置）

修改后的完整测试数据代码 #

const testdata = {
    labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    datasets: [
      // 前年電力量（独立柱状图）
      {
        label: "前年電力量",
        data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
        backgroundColor: "rgb(114, 225, 164)",
        stack: "previousYear", // 独立栈，与本年组区分
        barPercentage: 0.5,
        order: 2 // 晚于本年组渲染，确保并列显示
      },
  
      // 本年予想電力量（堆叠背景层）
      {
        label: "予想電力量",
        data: [150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150],
        backgroundColor: "rgba(237, 239, 255, 1)",
        borderColor: "rgba(106, 122, 242, 1)",
        borderWidth: 1,
        borderDash: [5, 5],
        stack: "currentYear", // 本年堆叠组统一栈名
        order: 1, // 优先渲染作为堆叠背景
        barPercentage: 0.5
      },

      // 本年分类堆叠项
      {
        label: "空調 (今年)",
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgba(88, 181, 247, 1)",
        stack: "currentYear",
        order: 1,
        barPercentage: 0.5
      },
      {
        label: "照明 (今年)",
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgb(71, 68, 222)",
        stack: "currentYear",
        order: 1,
        barPercentage: 0.5
      },
      {
        label: "冷ケース (今年)",
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgb(157, 201, 210)",
        stack: "currentYear",
        order: 1,
        barPercentage: 0.5
      },
      {
        label: "その他 (今年)",
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgb(182, 193, 200)",
        stack: "currentYear",
        order: 1,
        barPercentage: 0.5
      },
    ],
  };

关键配置说明 #

• stack属性：相同stack值的数据集会堆叠显示，不同stack值的数据集会并列显示，通过给「前年電力量」单独设置栈，实现与本年堆叠组的并列布局。
• order属性：控制数据集的渲染顺序，值越小越先渲染。本年组设为1优先渲染作为背景，前年组设为2在旁侧渲染，避免覆盖或错位。
• barPercentage：统一设置为0.5确保所有柱状图宽度一致，维持布局的整齐性。

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