时间戳

首页 > 解决方案 > 饼图标签在 ReactJS 中不可见

reactjs - 饼图标签在 ReactJS 中不可见

问题描述

我正在尝试创建一个饼图仪表板。图表正在根据值绘制，但图例未显示。我已经尝试了如下标签。

图表

摘要.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;

标签： reactjschart.js

解决方案

添加这个对我有用。

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

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

推荐阅读