如何使用 angular 2/8 中的chartjs-plugin-labels（饼图）显示百分比（%）

Question

我开始知道chartjs-plugin-labels最好显示百分比而不是角度内或角度外的计数值，但不幸的是没有找到角度 2/8 的代码，如下图所示。

Answer 1

JavaScript

以下示例摘自chartjs-plugin-labels 演示页面。

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>

角 8

在 Angular 8 中实现上述饼图的最简单和最简洁的方法是使用ng2-charts. 为了激活插件chartjs-plugin-labels，您的组件类中需要以下几行：

import * as pluginLabels from 'chartjs-plugin-labels';
...
pieChartPlugins = [];

ngOnInit() {
    ...
    this.pieChartPlugins = [pluginLabels];
}

请查看以下StackBlitz。