Question

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

<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不在中间，但可能需要以某种方式使用字体的高度。通常，对于简单的标签

来说，这似乎很复杂

有更好的方法吗？

Answer 1

像这样工作：-）

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

如何在Recharts React中手动标记LabelList

1 个答案: