react-chartjs-2横向柱状图如何固定柱宽不随柱子数量变化

要实现固定柱宽且不重叠，你可以通过「动态计算容器高度 + 关闭图表宽高比锁定」的方式实现，具体修改如下： #

第一步：调整图表基础配置 #

在你的options对象中新增2个配置：

• 关闭maintainAspectRatio，取消默认的宽高比强制限制，让图表完全适配外层容器尺寸
• 确认barThickness设为你需要的固定值（比如30）
  修改后的options核心部分：

const options = {  
  indexAxis: 'y',
  maintainAspectRatio: false, // 新增：关闭宽高比锁定
  elements: {
    bar: {
      borderWidth: 2,
      barThickness: 30, // 固定柱宽，可替换为你需要的数值
    },
  },
  // 其余原有配置保留不变
  // ...
}

第二步：动态计算外层容器高度 #

根据柱子数量实时计算容器高度，柱子过多时可自动出现滚动条：

• 单根柱子总占高 = 固定柱宽 + 预设间距（比如你要间距20，就是30+20=50px）
• 总高度 = 柱子数量 * 单根占高 + 上下边距预留（比如40px）
  修改你的render方法：

render() {
  // 数值可根据你的间距、边距需求自行调整
  const chartHeight = this.props.bars.length * (30 + 20) + 40;
  return (
    <div 
      style={{
        height: `${chartHeight}px`,
        overflowY: 'auto', // 不需要滚动可以删掉这行，页面会随图表整体拉长
      }}
    >
      <HorizontalBar data={this.data} options={options}/>
    </div>
  )
}

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