Recharts

Question

使用 recharts 网站上的示例条形图，我想将标签上的数字显示为 %。 https://jsfiddle.net/gearoid/7e717fa8/1/

const data = [
    { name: "18-24", audience: 35.18 },
    { name: "25-34", audience: 21.96 },
    { name: "35-44", audience: 7.26 },
    { name: "45-54", audience: 2.19 },
    { name: "55-64", audience: 0.67 },
    { name: "65+", audience: 0.33 },
    { name: "unknown", audience: 32.41 }

];

当我尝试将 % 添加到数组时，它显示在标签中，但不显示栏。常量数据 = [ { 姓名：“18-24”，观众：35.18 + “%” } ];`

知道如何实现吗？

谢谢！

Answer 1

您需要在 Bar 组件中添加 unit 道具：

<Bar dataKey="audience" fill="#82ca9d" unit="%" />

这是一个working demo

Answer 2

Bhojendra Rauniyar 的回答对我不起作用，但这个有效：

const labelFormatter = (value) => {
    return value + '%';
};
...
...
...
<Bar label={{ position: 'right', formatter: labelFormatter }}/>

Recharts - 标签显示数字为 %

Recharts - labels display numbers as %

reactjs

labels