小编Sur*_*han的帖子

我正在为 React 项目开发Recharts插件来显示饼图。

我的要求是在单击时获取饼图部分的值。我可以通过向Pie添加 onClick 道具来实现它标签来实现它。但问题是当我单击饼图中的标签时，未触发单击事件。

一些搜索结果显示，我们不能在 svg 子元素（如矩形、圆形、文本等）上单击事件。

有人遇到过这样的问题吗？请帮助我如何继续进行此操作。

饼图代码

const data = [{ name: 'On Time', value: Number(70), mode: 'total' }, 
              { name: 'Delayed', value: Number(30), mode: 'total' }];
const COLORS = ['#008000', '#fa833c'];
<PieChart width={300} height={300} className={'mainPie'}>
    <Pie dataKey="value"
         activeIndex={this.state.activeIndex}
         labelLine={false}
         label={renderCustomizedLabel}
         data={data}
         cx={150}
         cy={130}
         outerRadius={120}
         innerRadius={60}
         onClick={this.onPieClick}
         fill="#8884d8">
         {data.map((entry, index) => <Cell key={index} fill={COLORS[index % COLORS.length]}/>)}
     </Pie>
 </PieChart>

单击事件函数

onPieClick = (index, data) => {
    console.log('onPieClick'+index.value);
}

自定义标签代码库

const renderCustomizedLabel = …