[英]Pie Chart Label is not visible in ReactJS
I am trying to create a Pie Chart dashboard.我正在尝试创建饼图仪表板。 Chart is getting drawn based on the value, but the legend is not getting displayed.
根据值绘制图表,但未显示图例。 I have tried the label as below.
我已经尝试过如下标签。
Summary.js:摘要.js:
import React, { Component } from 'react';
import PieChart from 'react-minimal-pie-chart';
class Summary extends Component {
render()
{
return(
<PieChart className="chart-style" x={50} y={60} outerRadius={100} innerRadius={50}
data={[
{ value: 11, color: '#E38627',label: 'New' },
{ value: 12, color: '#C13C37',label: 'Closed' },
{ value: 8, color: '#6A2135',label: 'Reopened' },
]}
/>
);
}
}
export default Summary;
A good way to solve it is to provide a label function一个很好的解决方法是提供一个标签功能
<PieChart ...
label={props => { return props.data[props.dataIndex].label;}}
/>
You can also just provide label={true}
but then it will show te value not the label in the data array.您也可以只提供
label={true}
但它会显示 te 值而不是数据数组中的标签。
Adding this works for me.添加这个对我有用。
label={(props) => { return props.dataEntry.title;}}
Example例子
<PieChart
label={(props) => { return props.dataEntry.title;}}
data={[{ title: "One", value: 10, color: "#E38627" },
{ title: "Two", value: 15, color: "#C13C37" },
{ title: "Three", value: 20, color: "#6A2135" },
]}
/>
Its works at least for display labels, but you can customize it for showing percentage as well.它至少适用于显示标签,但您也可以自定义它以显示百分比。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.