React中Recharts图表区间宽度不均，如何实现等宽区间？

要确保所有区间宽度相等，核心思路是让每个区间对应数据数组中的独立条目，再配合正确的组件配置。以下是具体步骤：

1. 预处理原始数据，统一每个区间为单个数据项 #

不管每个区间内原始数据点的数量多少，先对数据做汇总统计，生成每个区间对应一条数据的新数组。比如统计每个区间的数量、总和等指标：

// 原始数据示例（每个条目属于某个区间）
const rawData = [
  { value: 12, interval: "0-10" },
  { value: 15, interval: "0-10" },
  { value: 22, interval: "10-20" },
  { value: 30, interval: "20-30" },
  { value: 35, interval: "20-30" },
  { value: 38, interval: "20-30" },
];

// 预处理：按区间统计数据点数量
const processedData = Object.entries(
  rawData.reduce((acc, item) => {
    acc[item.interval] = (acc[item.interval] || 0) + 1;
    return acc;
  }, {})
).map(([interval, count]) => ({ interval, count }));

预处理后的数据结构为：

[
  { interval: "0-10", count: 2 },
  { interval: "10-20", count: 1 },
  { interval: "20-30", count: 3 },
]

2. 使用BarChart组件渲染，确保每个区间对应一个Bar #

用处理后的数据渲染BarChart，每个区间会自动分配相等的宽度：

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const EqualWidthChart = () => {
  return (
    <BarChart width={600} height={300} data={processedData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="interval" />
      <YAxis label={{ value: '数量', angle: -90, position: 'insideLeft' }} />
      <Tooltip />
      <Bar dataKey="count" fill="#8884d8" />
    </BarChart>
  );
};

3. 特殊情况：强制固定Bar宽度（可选） #

如果预处理后仍有宽度不一致的问题，可在Bar组件中手动设置width属性固定柱子宽度：

<Bar dataKey="count" fill="#8884d8" width={40} />

4. 避免误用Histogram组件 #

如果之前用的是Histogram组件，它会根据原始数据的分布自动划分区间，容易出现宽度不均的情况。这种场景下建议改用上述BarChart+预处理数据的方案，完全控制区间的划分和统计逻辑。

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