使用react-chartjs-2显示每个切片的饼图数据值

我正在制作一个饼图，并且正在努力显示每个切片的饼图数据值。因为我的应用程序是用React.js编写的，所以我使用react-chartjs-2。

我找到了针对chart.js的解决方案并尝试实现，但是不适用于react-chartjs-2。

如何在chart.js中显示每个切片的饼图数据值

如何为每个环节增加价值？任何帮助表示赞赏。

这是饼图的当前视图。

根据建议，我实施了chart.piecelabel.js。它还行不通..

我的密码

import {Pie} from 'react-chartjs-2';
import {pieceLabel} from 'chart.piecelabel.js';

export default class Categories extends React.Component{
constructor(props){
    super(props);
    this.state = {
        slideOpen : false,
        piData : piData
      }

this.handleClick = this.handleClick.bind(this);
this.update = this.update.bind(this);
this.doParentToggle = this.doParentToggle.bind(this);
}

doParentToggle(){


this.setState({
    piData : piData
  })
  console.log('-------')
  console.log('parentToggle' + piData )
  console.log('parentToggle' + piData2 )
  console.log('parentToggle' + piData3 )
  console.log('-------')
  this.update();
 }

handleClick(){
    this.setState({
        slideOpen : !this.state.slideOpen
    })
}

update() {
  var piData;
  this.setState({
    piData : piData
  })
  console.log('-------')
  console.log('parentToggle' + piData )
  console.log('parentToggle' + piData2 )
  console.log('parentToggle' + piData3 )
  console.log('-------')
  }    

render(){
 const CategoriesPanel = this.state.slideOpen? "slideOpen" : "";
 const { length } = this.props


  var totalData = piData + piData2 + piData3 + piData4 + piData5;

   let newpiData =  function() {
   return parseFloat((piData /  totalData ) * 100 ).toFixed(2) };

   let newpiData2 =  function() {
   return parseFloat((piData2 /  totalData ) * 100).toFixed(2) };

   let newpiData3 =  function() {
   return  parseFloat((piData3 /  totalData ) * 100).toFixed(2) };

   let newpiData4 =  function() {
   return parseFloat((piData4 /  totalData ) * 100).toFixed(2) };

   let newpiData5 =  function() {
   return parseFloat((piData5 /  totalData ) * 100).toFixed(2) };

  const data = {
  datasets: [{
    data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()],
    backgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
    hoverBackgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
    borderColor: [ 'orange',
    'blue',
    'red',
    'purple',
    'green'
    ]
  }],
  options : [{
    pieceLabel: { render: 'value' }
  }]};

   var pieOptiOns= {
   events: false,
   animation: {
   duration: 500,
   easing: "easeOutQuart",
   onComplete: function () {
   var ctx = this.chart.ctx;
   ctx.fOnt= Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
   ctx.textAlign = 'center';
   ctx.textBaseline = 'bottom';

   this.data.datasets.forEach(function (dataset) {

    for (var i = 0; i 


{this.state.slideOpen?  : }
Update Information