使用C3.js实现自定义堆叠条形图后如何调整X轴显示值？

核心问题 #

你当前代码的问题主要有两处：

• 堆叠分组配置错误：将Total加入堆叠组后，Total会和A+B的堆叠结果再次叠加，无法实现Total作为灰色背景条的需求
• 没有显式配置X轴参数，导致X轴刻度显示异常

修复代码 #

你可以直接参考下方调整后的实现：

// 数据定义
const data_test = [
  ['Total', 1200, 200, 300],
  ['A', 300, 100, 100],
  ['B', 900, 100, 200]
]
// 颜色映射，可根据需求调整色值
const current_palette = {
  Total: '#e0e0e0',
  A: '#4285F4',
  B: '#34A853'
}
var chart_current=c3.generate({
  "bindto": "#distrib_chart",
  padding: {
    top: 10,
    right: 100,
    left: 130,
    bottom:0
  },
  data: {
    type: 'bar',
    // 仅堆叠A和B，Total作为独立背景层
    groups: [['A','B']],
    columns: data_test,
    colors: current_palette,
  },
  // X轴显式配置
  axis: {
    x: {
      type: 'category',
      // 此处替换为你实际需要的X轴分类名称
      categories: ['第一项', '第二项', '第三项'],
      tick: {
        rotate: 0
      }
    }
  },
  size: {
    height: 400,
    width: 300
  },
  // 可选配置，调整条形宽度
  bar: {
    width: {
      ratio: 0.7
    }
  }
})

修改后即可实现你预期的灰色Total作为背景，蓝色A、绿色B堆叠展示的效果，X轴也会显示你自定义的分类内容。

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