时间戳

首页 > 解决方案 > 如何在 Recharts React 中手动标记 LabelList

reactjs - 如何在 Recharts React 中手动标记 LabelList

问题描述

我想像这样手动命名水平条形图中的条形

<Bar dataKey="performanceavg" fill="#FFB85F">
    <LabelList dataKey="performanceavg" position="insideRight" />
    <LabelList content={"Performance Average"} position="insideLeft" />
</Bar>

测试了这个的不同变体，但遗憾的是没有成功。

我让它使用这个 http://recharts.org/en-US/examples/BarChartWithMinHeight

<Bar dataKey="performanceavg" fill="#FFB85F">
    <LabelList dataKey="performanceavg" position="insideRight" />
    <LabelList content={this.renderCustomizedLabel} position="insideLeft" />
</Bar>

和

renderCustomizedLabel = (props) => {
    console.log(props)
    const { x, y, width, height, value } = props;
    console.log(props)

    return (
        <g>
        <text x={x} y={y + height/2}>Performance Average</text>
        </g>
    );
};

但这似乎很复杂，并且 y + height/2 不是中间值，但可能需要以某种方式使用字体的高度。一般来说，这对于简单的标签来说似乎很复杂

有没有更好的办法？

标签： reactjsrecharts

解决方案

啊像这样它工作:-)

  <Bar dataKey="performanceavg" fill="#FFB85F">
      <LabelList dataKey="performanceavg" position="insideRight" />
      <LabelList position="insideLeft">Performance Average</LabelList>
  </Bar>

推荐阅读