Rechart堆叠柱状图数值显示异常问题排查求助

问题场景 #

使用Rechart构建堆叠柱状图时，设置stackOffset='expand'后，部分柱子的标签显示为1而非对应的百分比，组件代码及数据如下：

组件代码 #

function StackedBarChart({...props}){
    const {dataChart:{data,keys}} = props;

    const renderBars = () =>{
        return keys.map((item,index)=>(
            <Bar
                key={index}
                dataKey={item}
                stackId='a'
                fill={index%2?'blue':'red'}
                label
            />
        ))
    }

    return(
        <ResponsiveContainer width='100%' height={400}>
            <BarChart
                data={data}
                stackOffset='expand'
                >
                <XAxis dataKey="name" />
                <YAxis />
                {renderBars()}
            </BarChart>
        </ResponsiveContainer>
    )
}

数据 #

const dataChart = {
  data: [{
      name: 'Page A',
      count: 4000,
      price: 2400,
    },
    {
      name: 'Page B',
      count: 3000,
      price: 1398,
    },
    {
      name: 'Page C',
      count: 2000,
      price: 9800,
    },
  ],
  keys: ['price', 'count']
};

问题原因 #

当设置stackOffset='expand'时，Rechart会自动将每个堆叠项的数值转换为该组总和的比例值（范围0-1），默认的label直接显示了这个转换后的比例值，所以会出现显示1的情况（代表该项目占比100%）。

解决方法 #

自定义label内容，基于原始数据计算对应的百分比后再显示：

修改renderBars函数中的Bar组件配置，替换默认的label为自定义函数：

const renderBars = () =>{
    return keys.map((item,index)=>(
        <Bar
            key={index}
            dataKey={item}
            stackId='a'
            fill={index%2?'blue':'red'}
            label={({ value, payload }) => {
                // 计算当前分组的所有数据项总和
                const total = keys.reduce((sum, key) => sum + payload[key], 0);
                // 将比例值转换为百分比，保留1位小数
                const percentage = `${(value * 100).toFixed(1)}%`;
                return percentage;
            }}
        />
    ))
}

如果需要显示原始数值而非百分比，也可以直接返回原始值：

label={({ payload, dataKey }) => payload[dataKey]}

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