React 中饼图的自定义标签答案

【问题标题】：Custom Labels for Pie Charts in ReactReact 中饼图的自定义标签
【发布时间】：2020-06-09 18:56:39
【问题描述】：

我正在尝试使用此处看到的示例：https://recharts.org/en-US/examples/CustomActiveShapePieChart，但我希望在图表的每个部分上都有该标签，而不仅仅是活动部分。我试着让它在开始时所有状态都处于活动状态，但是在鼠标进入时，只有一个状态保持活动状态。如何为所有扇区获得具有相同样式和路径组件的相同标签？谢谢！

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

只需将 activeIndex 设为索引数组即可。例如，在 recharts 示例中，data.length 为 4，因此 activeIndex 将为[0, 1, 2, 3]。并从 Pie 中删除 onMouseEnter 属性，以便在悬停时它不会仅激活一个标签。

const TwoLevelPieChart = React.createClass({
  getInitialState() {
    return {
      activeIndex: [0, 1, 2, 3],
    };
  },

  render () {
    return (
      <PieChart width={800} height={400}>
        <Pie 
          activeIndex={this.state.activeIndex}
          activeShape={renderActiveShape} 
          data={data} 
          cx={300} 
          cy={200} 
          innerRadius={60}
          outerRadius={80} 
          fill="#8884d8"
        />
     </PieChart>
    );
  }
})

【讨论】：

【解决方案2】：

试试这个，你必须安装chart-js-plugin-datalabels

npm install chartjs-plugin-datalabels --save

import 'chartjs-plugin-datalabels';

return
<Pie
      label={label}
      data={datas}
      options={{
        plugins: {
        // Change options for ALL labels of THIS CHART
        datalabels: {
          formatter: function(value, context) {
            return context.chart.data.labels[context.dataIndex];
        }
        }
       }
     }
    }
    />

【讨论】：