如何实现双层叠加（非上下堆叠）的柱状图？含对数Y轴需求

核心思路 #

放弃堆叠（stackId）逻辑，改为在同一X轴位置绘制两组独立柱状图：通过调整柱子的宽度和位置，让两组柱子中心对齐，形成外层粗、内层细的嵌套效果，而非上下堆叠。

具体实现方案（以Chart.js为例） #

Chart.js支持自定义柱子尺寸和对数轴，是这类需求的高效选择：

1. 配置两组数据集，分别对应外层和内层柱子
   • 外层柱子：设置较大的barPercentage（柱子占分类宽度的比例），使用底层配色
   • 内层柱子：设置较小的barPercentage，使用上层配色，且不设置stackId，确保和外层柱子重叠在同一位置
2. 处理对数Y轴的特殊要求
   • 对数轴不支持0或负数，需确保所有数据为正数；若存在接近0的数值，可设置Y轴min为极小正数（如0.1）
   • 配置Y轴类型为对数，并优化刻度显示避免冗余小数

示例代码

const ctx = document.getElementById('nestedBarChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['样本1', '样本2', '样本3', '样本4'],
    datasets: [
      // 外层柱子
      {
        label: '底层数据',
        data: [8, 90, 450, 1800],
        backgroundColor: '#d0d0d0',
        barPercentage: 0.8,
        categoryPercentage: 1
      },
      // 内层柱子
      {
        label: '上层数据',
        data: [4, 45, 220, 900],
        backgroundColor: '#3b82f6',
        barPercentage: 0.4,
        categoryPercentage: 1
      }
    ]
  },
  options: {
    scales: {
      y: {
        type: 'logarithmic',
        min: 1,
        ticks: {
          // 仅显示整数刻度，优化可读性
          callback: (value) => Number.isInteger(value) ? value : ''
        }
      }
    }
  }
});

进阶方案（D3.js） #

如果需要更灵活的自定义（比如特殊形状的柱子），可以用D3.js实现：

• 创建对数比例尺：const yScale = d3.scaleLog().domain([1, 2000]).range([chartHeight, 0])
• 分别绘制外层和内层柱子，计算相同的X轴坐标，设置不同的宽度，通过数据绑定计算Y轴高度
• 确保内层柱子的绘制顺序晚于外层，或设置更高的层级，保证显示在上方

常见问题排查 #

• 柱子不对齐：检查categoryPercentage和barPercentage参数，确保两组柱子的中心坐标一致
• 对数轴异常：排查数据是否包含0/负数，调整Y轴min值，或对极小数据做偏移处理（如data.map(v => v || 0.1)）
• 自定义柱形失效：若之前尝试自定义未成功，需确认两组柱子的层级关系，以及位置计算逻辑是否正确

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