如何用ApexCharts配置类Google Charts直方图的图表？

你不需要用堆叠柱状图，直接用**普通柱状图（Bar Chart）**就能完美还原Google Charts直方图的效果，以下是针对你的需求的具体配置方案，核心解决X轴自定义区间和柱宽一致的问题：

核心配置代码 #

const options = {
  chart: {
    type: 'bar',
    height: 400
  },
  series: [{
    name: '书籍数量',
    data: [22, 2, 1] // 替换为你处理好的各区间计数数据
  }],
  xaxis: {
    categories: ['≤100页', '100-300页', '300-400页'], // 自定义X轴区间标签，完全控制显示内容
    labels: {
      style: {
        fontSize: '12px'
      }
    }
  },
  plotOptions: {
    bar: {
      columnWidth: '80%', // 固定柱宽，确保所有柱子宽度一致
      borderRadius: 4 // 可选，按需设置柱子圆角
    }
  },
  yaxis: {
    title: {
      text: '书籍数量'
    },
    min: 0 // Y轴从0开始，避免计数显示失真
  },
  title: {
    text: '书籍页数分布',
    align: 'left'
  }
};

// 初始化图表
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

关键配置说明 #

• chart.type: 'bar'：放弃堆叠柱状图，普通柱状图即可满足单组区间计数的需求
• xaxis.categories：直接传入自定义的区间标签数组，完全控制X轴显示内容，解决你无法控制X轴数值的问题
• plotOptions.bar.columnWidth：设置固定百分比或像素值，强制所有柱子保持相同宽度，解决柱宽不一致的问题
• series.data：传入处理好的各区间对应书籍数量数组即可

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