如何使用chartjs-plugin-labels（饼图）以角度2/8显示百分比（％）

Question

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

Answer 1

JavaScript

[以下样品是从chartjs-plugin-labels demo 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: '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>

Angular 8

在Angular 8中实现以上饼图的最简单，最干净的方法是使用ng2-charts。为了激活插件ng2-charts，您需要在组件类中包含以下几行：

chartjs-plugin-labels

请看下面的

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

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

。