Как вручную пометить LabelList в Recharts React - PullRequest
Новая
       20

Как вручную пометить LabelList в Recharts React

0 голосов
/ 25 июня 2019

Я хотел вручную назвать столбцы на горизонтальной гистограмме следующим образом 

<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 - не середина, но, вероятно, нужно как-то работать с высотой шрифта. Вообще это кажется сложным для простой маркировки

Есть ли лучший способ?

1 Ответ

0 голосов
/ 25 июня 2019

Ах, вот так это работает: -) 

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