Recharts堆叠柱状图每分组重复渲染总标签，如何仅渲染单个总标签

问题原因 #

你当前给每个堆叠<Bar>组件都嵌套了<LabelList>组件，因此有多少个堆叠段就会渲染多少个重复的总数值标签，重叠展示后就会出现文字加粗的视觉效果。

解决方案 #

方案1：仅为最后一个堆叠段渲染标签（推荐） #

利用map遍历的索引判断是否为最后一个堆叠Bar，仅在最后一个Bar上渲染LabelList，即可保证每组只出现一个总标签，无需调整现有数据和渲染逻辑：

const renderBars = () => {
  return parsedData.map(({name, dataKey, barName, color, renderShape}, index) => {
    return (
      <Bar
        key={`axis-${name}-${dataKey}`}
        dataKey={dataKey}
        stackId={barName}
        fill={color}
        shape={renderShape}
      >
        {/* 只有最后一个堆叠段才渲染总标签 */}
        {index === parsedData.length - 1 && (
          <LabelList 
            valueAccessor={item => item?.total ?? 0} 
            position="right" 
          />
        )}
      </Bar>
    )
  });
}

注意：你原有代码中valueAccessor={valueAccessor(barName)}的写法错误，该属性需要接收函数作为参数，直接执行会导致取值异常，上述代码已做修正。

方案2：固定指定某个Bar承载标签 #

如果堆叠段的顺序不固定，可以约定某个固定的dataKey对应的Bar负责渲染标签：

const renderBars = () => {
  return parsedData.map(({name, dataKey, barName, color, renderShape}) => {
    return (
      <Bar
        key={`axis-${name}-${dataKey}`}
        dataKey={dataKey}
        stackId={barName}
        fill={color}
        shape={renderShape}
      >
        {/* 约定dataKey为data2的Bar负责渲染总标签，可按需修改判定条件 */}
        {dataKey === 'data2' && (
          <LabelList 
            valueAccessor={item => item?.total ?? 0} 
            position="right" 
          />
        )}
      </Bar>
    )
  });
}

两种方案都不会影响你现有的自定义条形颜色、renderShape渲染逻辑，也不需要调整原有数据结构。

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