3

我需要使用 React Recharts 制作包含三个部分的饼图。

我有两个问题：

  1. 在鼠标悬停时，我想在工具提示中显示带有百分比的文本。如何在工具提示中获取百分比值？

  2. 更改大小时，如果饼图中的某些部分太小，则我需要隐藏标签；如何做到这一点？

我的示例代码

const {PieChart, Pie, Sector} = Recharts;
const data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300},
                  {name: 'Group C', value: 300}, {name: 'Group D', value: 200}]; 
function renderCustomToolTip({active, label, payload}) {
  return(
  <div>
    <p> payload[0].label </p>
// need to add percentage value in tooltip
  </div>
);
}
class PieChart extends from React.Component{
    constructor() {
        super(props);
        this.state = {
            activeIndex: 0
        }
    }
    onPieEnter(data, index) {
        this.setState({
          activeIndex: index,
        });
      }
      render () {
        return (
            <div>
                <PieChart width={800} height={400}>
                <Pie 
                    activeIndex={this.state.activeIndex}
                    activeShape={renderActiveShape} 
                    data={data} 
                    cx={300} 
                    cy={200} 
                    innerRadius={60}
                    outerRadius={80} 
                    fill="#8884d8"
                    labelLine={false}
                    label={renderCustomizedLabel}
                    onMouseEnter={this.onPieEnter}
                />
          {
            data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
          }
          <ToolTip content={renderCustomToolTip} />
          </PieChart>
         </div>
      );
    }
}

使用activeShape，能够获取每个部分的百分比值，但我需要在工具提示中显示百分比。

谢谢。

4

1 回答 1

0

以下是您应该为百分比做的事情：

renderCustomTooltip = ({ active, payload, label }) => {
    if (active) {
        return (
            <div className="custom-tooltip" style={{ backgroundColor: '#ffff', padding: '5px', border: '1px solid #cccc' }}>
                <p>{`Expenditure on ${payload[0].name} : ${payload[0].value}K`}</p>
                <p>{'percentage: '+(`${payload[0].value}`*100/(sum_of_all_values)).toFixed(2)+'%'}</p>
            </div>
        );
    }     return null;
};

将“（sum_of_all_values）”替换为您的值的实际总和，或编写另一个执行相同操作的方法并在此位置分配它的值。

于 2021-09-03T10:46:53.307 回答