如何在Chart.js中为堆叠柱状图添加基线背景柱

要实现将"予想"（prediction）柱作为背景基线，让其他堆叠柱显示在其上方的效果，核心是利用Chart.js的渲染顺序和堆叠配置调整，具体步骤如下：

关键调整点 #

1. 控制渲染顺序：通过order属性让prediction柱最先渲染（置于最底层），无需调整数组顺序。
2. 配置堆叠规则：
   • 关闭x轴堆叠，确保所有柱在同一x位置重叠显示；
   • 开启y轴堆叠，让填充柱累计高度；
   • 给prediction单独分配stack，避免参与填充柱的高度堆叠。

修改后的代码 #

const chartData = {
  labels: ["今日"],
  datasets: [
    {
      label: "air-c",
      data: [300],
      backgroundColor: "rgba(88, 181, 247, 1)",
      stack: "filling",
    },
    {
      label: "illumination",
      data: [300],
      backgroundColor: "rgba(71, 68, 222, 1)",
      stack: "filling",
    },
    {
      label: "cooling-case",
      data: [300],
      backgroundColor: "rgba(157, 201, 210, 1)",
      stack: "filling",
    },
    {
      label: "others",
      data: [100],
      backgroundColor: "rgba(182, 193, 200, 1)",
      stack: "filling",
    },
    {
      label: "prediction",
      data: [1200],
      backgroundColor: "rgba(237, 239, 255, 0.5)",
      borderColor: "rgba(106, 122, 242, 1)",
      borderWidth: 1,
      borderDash: [5, 5],
      stack: "baseline",
      order: -1, // 强制该数据集最先渲染，置于底层
    },
  ],
};

const options = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: { stacked: false }, // 关闭x轴堆叠，让所有柱在同一位置重叠
    y: {
      stacked: true, // 开启y轴堆叠，让填充柱累计高度
      max: 2000,
      ticks: { stepSize: 1000 },
    },
  },
  plugins: {
    legend: { display: false },
    datalabels: { display: false },
    tooltip: {
      callbacks: {
        label: (context) => {
          const label = context.dataset.label || "";
          return `${label}: ${new Intl.NumberFormat("ja-JP", {
            style: "currency",
            currency: "JPY",
          }).format(context.parsed.y)}`;
        },
      },
    },
  },
};

原理说明 #

• order: -1：Chart.js默认按数组顺序渲染数据集，order值越小越先渲染，因此prediction柱会被绘制在最底层，作为背景。
• x: { stacked: false }：取消x轴方向的堆叠，确保所有数据集在同一x标签位置（今日）重叠显示。
• y: { stacked: true }：开启y轴堆叠，让"filling"组内的填充柱累计高度，实现堆叠效果。
• 分离stack：prediction使用独立的"baseline" stack，不会参与填充柱的高度叠加，保持自身1200的高度作为背景容器。

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