ChartJS 2.7.3 实现部分堆叠、部分重叠的柱状图技术咨询

是的，Chart.js完全可以实现你想要的这种部分堆叠、部分重叠的柱状图效果！你当前的问题主要是没有正确配置堆叠相关的属性，以及轴的设置需要调整。

问题分析 #

你已经把First和Second数据集绑定到了同一个x轴，但没有给它们设置相同的stack标识，同时y轴也没有启用堆叠模式，导致它们没有堆叠反而重叠。而Third数据集需要和这个堆叠组在同一x位置重叠显示，所以需要调整x轴的偏移和配置来对齐。

修正后的实现代码 #

var data = {
  labels: ["x1", "x2", "x3"],
  datasets: [
    {
      label: "First",
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderWidth: 1,
      data: [10, 20, 30],
      xAxisID: "bar-x-axis1",
      stack: 'stack-group' // 给需要堆叠的数据集设置相同stack值
    },
    {
      label: "Second",
      backgroundColor: 'green',
      borderWidth: 1,
      data: [5, 7, 9],
      xAxisID: "bar-x-axis1",
      stack: 'stack-group' // 和First使用同一个stack组
    },
    {
      label: "Third",
      backgroundColor: 'rgba(255, 206, 86, 0.2)',
      borderWidth: 1,
      data: [5, 30, 35],
      xAxisID: "bar-x-axis2"
    }
  ]
};

var options = {
  scales: {
    xAxes: [
      {
        id: "bar-x-axis1",
        barThickness: 30,
        gridLines: { offsetGridLines: true }
      },
      {
        id: "bar-x-axis2",
        display: false, // 隐藏第二个x轴
        barThickness: 70,
        type: 'category',
        categoryPercentage: 0.8,
        barPercentage: 0.9,
        offset: true, // 让第二个x轴的柱子和第一个x轴对齐重叠
        gridLines: { offsetGridLines: true }
      }
    ],
    yAxes: [
      {
        stacked: true, // 启用y轴堆叠，这是堆叠生效的关键
        ticks: {
          beginAtZero: true
        }
      }
    ]
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

关键修改说明 #

• 数据集stack属性：给需要堆叠的First和Second数据集设置相同的stack值（比如stack-group），Chart.js会自动将同组的数据集在y轴方向堆叠。
• y轴stacked: true：这是堆叠功能生效的核心配置，只有开启y轴堆叠，同stack组的数据集才会累计高度显示。
• x轴偏移对齐：第二个x轴设置offset: true，确保Third系列的柱子能和First+Second的堆叠柱在同一x位置重叠显示。
• 简化x轴配置：移除了不必要的stacked配置（x轴的stacked不是控制柱状图堆叠的关键），让配置更清晰。

这样调整后，x1位置的First(10)和Second(5)会堆叠成总值15，Third(5)的柱子会和这个堆叠柱重叠显示，完全符合你的需求。

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