Question

我正在尝试创建饼图仪表板。图表将根据值绘制，但图例不会显示。我已尝试过如下标签。

Summary.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;

Answer 1

添加此项对我有用。

label={(props) => { return props.dataEntry.title;}}

示例

    <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" },
    ]}
    />

它至少适用于显示标签，但是您也可以自定义它以显示百分比。

Answer 2

解决此问题的一种好方法是提供标签功能

<PieChart ... 
label={props => { return props.data[props.dataIndex].label;}}
/>

您也可以只提供label={true}，但是它将显示te值而不是数据数组中的标签。

饼图标签在ReactJS中不可见

2 个答案: