我有一个条形图,想要在条形图的顶部显示这样的标签:
不幸的是,条形图似乎只交给了一个非常有限的入口对象。这就是我所拥有的:
数据
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标签得到的条目似乎更加明确,包含完整的数据位置作为有效负载属性。