显示标签名称而不是Barchart的值

时间:2020-08-04 08:19:59

标签: recharts

我有一个条形图,想要在条形图的顶部显示这样的标签:

enter image description here

不幸的是,条形图似乎只交给了一个非常有限的入口对象。这就是我所拥有的:

数据

const data = [
    { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
    { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
    { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
    { name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
    { name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
    { name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
    { name: "Page G", uv: 3490, pv: 4300, amt: 2100 },
];

图表

<Bar dataKey="pv" label={this.renderLabel}>
     {data.map((entry, index) => <Cell {...}/>}
</Bar>

renderLabel()

renderLabel(entry) {
    console.log(entry)
    return (<Label {...entry}/>);
}

条形图的条目如下:

content: ƒ renderLabel(entry)
fill: "#FEF6E3"
height: 30
index: 1
offset: 5
style: {paddingTop: "5rem"}
value: 1398
viewBox: {x: 20, y: 95, width: 76.89000000000001, height: 30}
width: 76.89000000000001
x: 20
y: 95

我不确定是否可以通过任何方式访问标签中数据点的name属性?

此问题已回答for a Piechart

但是PieChart标签得到的条目似乎更加明确,包含完整的数据位置作为有效负载属性。

0 个答案:

没有答案