如何在Recharts JS中实现高度对应cost、宽度对应volume的条形图

要实现条形高度随cost变化、宽度随volume变化且X轴刻度与条形对齐的效果，核心是动态计算每个条形的宽度与位置，同时自定义X轴刻度的定位。以下是具体实现步骤：

1. 数据预处理与宽度计算 #

先计算所有数据的总volume，以此为基准计算每个条形的宽度占比，再结合图表实际可用宽度得到每个条形的具体宽度；同时计算每个条形的起始X坐标，用于后续定位。

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

const data = [
  { volume: 1500, cost: -136.06243, totalVolumeCost: -204093.645 },
  { volume: 1000, cost: -272.12486, totalVolumeCost: -294166.97366 }
];

// 计算总volume
const totalVolume = data.reduce((sum, item) => sum + item.volume, 0);
// 图表可用宽度（容器总宽度600，左右各留50px padding）
const chartAvailableWidth = 500;

// 为每个数据项添加宽度和起始位置
const processedData = data.map((item, index) => {
  const width = (item.volume / totalVolume) * chartAvailableWidth;
  // 起始X为前面所有条形的宽度之和
  const x = index === 0 ? 0 : processedData[index - 1].x + processedData[index - 1].width;
  return { ...item, width, x };
});

2. 自定义X轴刻度对齐 #

通过XAxis的tick属性自定义刻度位置，将刻度定位到每个条形的中心：

const CustomXTick = ({ x, payload }) => {
  const item = processedData.find(d => d.volume === payload.value);
  const centerX = item.x + item.width / 2;
  return <text x={centerX} y={20} textAnchor="middle">{payload.value}</text>;
};

3. 渲染动态宽度的条形图 #

使用Bar组件的width和x属性手动控制每个条形的尺寸与位置，Y轴绑定cost属性控制高度：

const CustomBarChart = () => {
  return (
    <BarChart width={600} height={400} data={processedData} margin={{ top: 20, right: 30, left: 50, bottom: 50 }}>
      <XAxis 
        dataKey="volume" 
        tick={<CustomXTick />}
        axisLine={false}
        tickLine={false}
      />
      <YAxis dataKey="cost" />
      <Tooltip />
      <Bar 
        dataKey="cost" 
        fill="#8884d8"
        // 动态绑定每个条形的宽度和位置
        width={item => item.width}
        x={item => item.x}
      />
    </BarChart>
  );
};

export default CustomBarChart;

关键说明 #

• 动态宽度：通过volume占比计算条形宽度，确保宽度与volume成正比
• X轴对齐：自定义tick组件将刻度定位到条形中心，解决刻度与条形错位问题
• 高度控制：Bar的dataKey绑定cost，条形高度自动随cost值变化

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