如何使用chart.js在饼图中显示切片内的切片值

Question

我有一个场景，我需要在饼图中显示切片内部的切片值。我的网页上有超过 1 个饼图。下面的代码可以正常工作，但仅适用于第一个饼图，对于其他人，它的抛出错误如下，您能帮我解决这个问题吗？

Error:: unCaught TypeError: cannot read the property 'data' of undefined.

 Code:: 
 options:{
 animation:{
 onComplete:function(){
      var ctx = this.chart.ctx;
      var dataset_obj = this.data.datasets;
      for (var i=0;i<dataset_obj.length; i++){
          var meta_obj = dataset_obj[i]._meta[i].data;
          for (var j=0; j<meta_obj.length; j++){
               var model =meta_obj[j]._model;
               start_angle= model.startAngle;
               end_angle = model.endAngle;
               mid_angle =start_angle + ( end_angle -start_angle)/2;
               mid_radius = model.innerRadius + (model.outerRadius -model.innerRadius)/2;
               var x =mid_radius*math.cos(mid_angle);
               var  y = mid_radius*math.cos(mid_angle);

               ctx.fillstyle='#fff';
               if (dataset_obj[i].data[j] != 0 && meta_obj[j].hidden != true){
                    ctx.fillText(dataset_obj[i].data[j], model.x+x, model.y+y);
               }
         }
      }
 }
 }
 }

Answer 1

这回答了问题标题中包含的问题：

如何使用chart.js在饼图中的切片内显示切片值

下面的代码 sn-p 显示了如何使用chartjs-plugin-labels 在切片内显示值。样本代码提取自chartjs-plugin-labelsdemo page。

var canvas = document.getElementById('myChart');
new Chart(canvas, {
    type: 'pie',    
    data: {
      labels: ['January', 'February', 'March'],
      datasets: [{
        data: [50445, 33655, 15900],
        backgroundColor: ['#FF6384', '#36A2EB','#FFCE56']
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        labels: {
          render: 'value',
          fontColor: ['green', 'white', 'red']
        }
      }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>

如果要显示每个切片的百分比，可以执行以下操作：

var canvas = document.getElementById('myChart');
new Chart(canvas, {
    type: 'pie',    
    data: {
      labels: ['January', 'February', 'March'],
      datasets: [{
        data: [50445, 33655, 15900],
        backgroundColor: ['#FF6384', '#36A2EB','#FFCE56']
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        labels: {
          render: 'percentage',
          fontColor: ['green', 'white', 'red'],
          precision: 2
        }
      },
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>