使用Chart.js和Angular2，Ionic2的甜甜圈圖表中的文本

Question

如何使用Chart.js和Angular2在甜甜圈圖表中添加文本標籤？ 我看到了這個主題的一些答案，但他們都沒有爲我工作，因爲我正在使用Ionic2應用程序。 這是我的簡化代碼：

import { Chart } from 'chart.js'; 

    @ViewChild('doughnutCanvas') doughnutCanvas; 

    ionViewDidEnter() { 

    this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, { 

     type: 'doughnut', 
     data: { 
     labels: this.titles, 
     datasets: [{ 
      label: '# of Work', 
      data: this.times, 
      backgroundColor: [ 
      'rgba(255, 99, 132, 0.5)', 
      'rgba(54, 162, 235, 0.5)' 
      ], 
      hoverBackgroundColor: [ 
      "#FF6384", 
      "#36A2EB" 
      ] 
     }] 
     }, 
     options: { 
     responsive: true, 
     legend: { 
      display: false 
     } 
     } 
    }); 
    } 

Answer 1

這可以通過創建/生成圖表前登錄插件，你可以創建以下列方式插件來實現......

Chart.plugins.register({ 
    beforeDraw: function(chart) { 
     var data = chart.data.datasets[0].data; 
     var sum = data.reduce(function(a, b) { 
      return a + b; 
     }, 0); 
     var width = chart.chart.width, 
      height = chart.chart.height, 
      ctx = chart.chart.ctx; 
     ctx.restore(); 
     var fontSize = (height/10).toFixed(2); 
     ctx.font = fontSize + "px Arial"; 
     ctx.textBaseline = "middle"; 
     var text = sum, 
      textX = Math.round((width - ctx.measureText(text).width)/2), 
      textY = height/2; 
     ctx.fillText(text, textX, textY); 
     ctx.save(); 
    } 
}); 

ᴅᴇᴍᴏ

// register plugin 
 
Chart.plugins.register({ 
 
    beforeDraw: function(chart) { 
 
     var data = chart.data.datasets[0].data; 
 
     var sum = data.reduce(function(a, b) { 
 
      return a + b; 
 
     }, 0); 
 
     var width = chart.chart.width, 
 
      height = chart.chart.height, 
 
      ctx = chart.chart.ctx; 
 
     ctx.restore(); 
 
     var fontSize = (height/10).toFixed(2); 
 
     ctx.font = fontSize + "px Arial"; 
 
     ctx.textBaseline = "middle"; 
 
     var text = sum, 
 
      textX = Math.round((width - ctx.measureText(text).width)/2), 
 
      textY = height/2; 
 
     ctx.fillText(text, textX, textY); 
 
     ctx.save(); 
 
    } 
 
}); 
 

 
// generate chart 
 
var ctx = document.getElementById('canvas').getContext('2d'); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ["Red", "Blue", "Yellow"], 
 
     datasets: [{ 
 
      data: [300, 50, 100], 
 
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"], 
 
      hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"] 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     legend: { 
 
      display: false 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="canvas"></canvas>