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

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

我为chart.js找到了这个解决方案，并尝试实现，但它对react-chartjs-2不起作用

如何为每个切片添加值？感谢您的帮助

这是饼图的当前视图

根据建议，我实现了

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 < dataset.data.length; i++) {
      var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
          total = dataset._meta[Object.keys(dataset._meta)[0]].total,
          mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
          start_angle = model.startAngle,
          end_angle = model.endAngle,
          mid_angle = start_angle + (end_angle - start_angle)/2;

      var x = mid_radius * Math.cos(mid_angle);
      var y = mid_radius * Math.sin(mid_angle);

      ctx.fillStyle = '#fff';
      if (i == 3){ // Darker text color for lighter background
        ctx.fillStyle = '#444';
      }
      var percent = String(Math.round(dataset.data[i]/total*100)) + "%";
      ctx.fillText(dataset.data[i], model.x + x, model.y + y);
      // Display percent in another line, line break doesn't work for fillText
      ctx.fillText(percent, model.x + x, model.y + y + 15);
    }
   });               
   }
   }
 };
return(
<div>
<div id="chart" className={CategoriesPanel}>
<Pie style={{"fontSize" : "20px" }}data={data}/>
<div className="categoriesSlide" onClick={this.handleClick}>{this.state.slideOpen? <img src={Arrowup} alt="arrowup" className="arrowup" /> : <img src={Arrowdown} alt="arrowdown" className="arrowdown"/>}</div>
<button onClick={this.update} className="chartButton">Update Information</button></div>

 <div className="clear">
 <List parentToggle={this.doParentToggle} />
 <ListSecond parentToggle={this.doParentToggle} />
 <ListThird parentToggle={this.doParentToggle} />
 <ListFourth parentToggle={this.doParentToggle} />
 <ListFifth parentToggle={this.doParentToggle} />
 </div>
 </div>
    )
}
}

从'react-chartjs-2'导入{Pie}；
从'chart.pieceLabel.js'导入{pieceLabel}；
导出默认类类别扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
幻灯片：错，
皮塔塔：皮塔塔
}
this.handleClick=this.handleClick.bind（this）；
this.update=this.update.bind（this）；
this.doParentToggle=this.doParentToggle.bind（this）；
}
doParentToggle（）{
这是我的国家({
皮塔塔：皮塔塔
})
console.log（'----'）
console.log（'parentToggle'+piData）
console.log（'parentToggle'+piData2）
console.log（'parentToggle'+piData3）
console.log（'----'）
这个.update（）；
}
handleClick（）{
这是我的国家({
slideOpen:！this.state.slideOpen
})
}
更新（）{
皮塔塔变种；
这是我的国家({
皮塔塔：皮塔塔
})
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+piData 2+piData 3+piData 4+piData 5；
设newpiData=function（）{
返回parseFloat（（piData/totalData）*100）.toFixed（2）}；
设newpidata=function（）{
返回parseFloat（（piData2/totalData）*100）.toFixed（2）}；
设newpidata=function（）{
返回parseFloat（（piData3/totalData）*100）.toFixed（2）}；
设newpidata=function（）{
返回parseFloat（（piData4/totalData）*100）.toFixed（2）}；
设newpidata=function（）{
返回parseFloat（（piData5/totalData）*100）.toFixed（2）}；
常数数据={
数据集：[{
数据：[newpiData（），newpiData 2（），newpiData 3（），newpiData 4（），newpiData 5（）]，
背景颜色：[
“橙色”，
“蓝色”，
“红色”，
“紫色”，
“绿色”
],
悬停背景颜色：[
“橙色”，
“蓝色”，
“红色”，
“紫色”，
“绿色”
],
边框颜色：[“橙色”，
“蓝色”，
“红色”，
“紫色”，
“绿色”
]
}],
选项：[{
pieceLabel:{render:'value'}
}]};
变量选项={
事件：错误，
动画：{
持续时间：500，
放松：“放松夸脱”，
onComplete:函数（）{
var ctx=this.chart.ctx；
ctx.font=Chart.helpers.fontString（Chart.defaults.global.defaultFontFamily，'normal'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
this.data.datasets.forEach（函数（数据集）{
对于（var i=0；i

您可以使用此ChartJS插件-

首先，通过npm安装：

npm install chart.piecelabel.js --save

然后将其导入组件中：

import 'chart.piecelabel.js';

最后，在图表选项中添加以下内容：

pieceLabel: {
   render: 'value'
}

---

注意：这是显示值所需的最小选项，您可以找到更多选项。

您好，非常感谢您的建议。实际上，在尝试上述解决方案之前，我已经尝试过了。不幸的是，它没有起作用。你有一个有效的演示吗？你的导入语句应该是

import'chart.piecelabel.js'非
从'chart.pieceLabel.js'导入{pieceLabel}嗯。。这不应该发生。您还在错误的位置添加了选项。添加
piecelab:{render:'value'}
inside
pieOptions
很久以前就尝试过了，现在不再有那个repo了。无论如何，刚才注意到您在
数据集中设置了
选项
，这是不正确的，您需要单独添加
选项
。尝试使用此代码-抱歉，我以前不明白你的意思。你的代码澄清了这一点。非常感谢你的帮助！！！