Chart.js：带有附加单条的堆叠条形图布局问题

Question

我的 Chart.js 堆叠条形图的布局遇到问题。我正在尝试显示“前年电力”（上一年的电力消耗）的单个条形和“予想电力”（当前年度的电力消耗）的堆叠条形。

问题在于排序和堆栈。如果我在测试数据中评论数据集“上一年的总功耗”以及顺序和堆栈，则布局工作正常，有一个布局正确的数据示例，但仅一个月，试图实现所有 12 个。

这是codesandbox中的代码示例：https://codesandbox.io/p/sandbox/dv2wl3

如果您在 .

中使用数据而不是测试数据，则尝试实现相同的目标

const testdata = {
    labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    datasets: [
      // Unique bar for 前年電力量 (Previous Year's Power Consumption)
      {
        label: "前年電力量", // Previous year's total power consumption
        data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
        backgroundColor: "rgb(114, 225, 164)", // Green color for previous year
        // stack: "previousYear", // Separate stack for previous year
        barPercentage: 0.5,
        // grouped: false,
        // order: 3,
      },
  
      // Baseline bar (container) for 今年の電力消費量 (Current Year Estimate)
      {
        label: "予想電力量", // Estimated power consumption for the current year
        data: [150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150], // Baseline data for each month
        backgroundColor: "rgba(237, 239, 255, 1)", // Light color to act as background container
        borderColor: "rgba(106, 122, 242, 1)",
        borderWidth: 1,
        borderDash: [5, 5],
        stack: "currentYear", // Stack for current year estimate
        grouped: false,
        order: 1, // Render this first to act as a background layer
        barPercentage: 0.5,
      },

      // Stacked categories within 今年の電力消費量 (Current Year Power Consumption)
      {
        label: "空調 (今年)", // Air Conditioning - Current Year
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgba(88, 181, 247, 1)", // Blue color for air conditioning
        stack: "currentYear", // Stack for current year
        grouped: false,
        order: 1,
        barPercentage: 0.5,
      },
      {
        label: "照明 (今年)", // Illumination - Current Year
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgb(71, 68, 222)", // Color for illumination
        stack: "currentYear", // Stack for current year
        grouped: false,
        order: 1,
        barPercentage: 0.5,
      },
      {
        label: "冷ケース (今年)", // Cooling Case - Current Year
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgb(157, 201, 210)", // Color for cooling case
        stack: "currentYear", // Stack for current year
        grouped: false,
        order: 1,
        barPercentage: 0.5,
      },
      {
        label: "その他 (今年)", // Others - Current Year
        data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        backgroundColor: "rgb(182, 193, 200)", // Color for others
        stack: "currentYear", // Stack for current year
        grouped: true,
        order: 1,
        barPercentage: 0.5,
      },
    ],
  };

谢谢！

Answer 1

为了让您的场景重现每个月相同的图表（从

testdata

）到

data

，您需要将“前年电力”（上一年的电力消耗）数据修改为

null

并使用

skipNull

设置。

因此，它只会渲染两个带有“前年电力消耗（上一年的电力消耗）”的条形和堆叠的条形“今年の电力消费量”（当前年度估计）

const options = {
  ...,
  skipNull: true,
};

 const data = {
    labels: ["前年電力量", "今年の電力消費量"],
    datasets: [
      {
        label: "予想電力量", // estimated power consumption
        data: [null, 220],
        backgroundColor: "rgba(237, 239, 255, 1)",
        borderColor: "rgba(106, 122, 242, 1)",
        borderWidth: 1,
        borderDash: [5, 5],
        stack: "baseline",
        grouped: false,
        order: 1,
        barPercentage: 0.5,
      },
      {
        label: "前年電力量",
        data: [100, null],
        backgroundColor: "rgb(114, 225, 164)",
        barPercentage: 0.5,
      },
      {
        label: "空調", // air conditioning
        data: [null, 20],
        backgroundColor: "rgb(88, 181, 247)",
        barPercentage: 0.5,
      },
      {
        label: "照明", // illumination
        data: [null, 30],
        backgroundColor: "rgb(71, 68, 222)",
        barPercentage: 0.5,
      },
      {
        label: "冷ケース", // Cooling Case
        data: [null, 50],
        backgroundColor: "rgb(157, 201, 210)",
        barPercentage: 0.5,
      },
      {
        label: "その他", // others
        data: [null, 20],
        backgroundColor: "rgb(182, 193, 200)",
        barPercentage: 0.5,
      },
    ],
  };

演示@代码沙箱