ng2-chart：如何在图表中显示百分比值？答案

【问题标题】：ng2-chart: How to show percentage values inside the chart?ng2-chart：如何在图表中显示百分比值？
【发布时间】：2021-03-14 23:18:02
【问题描述】：

我已经在谷歌上搜索了几个小时，但还没有找到答案。我正在使用 ng2-chart 在仪表板中生成图表。它运作良好，问题是我想在圆环图中显示百分比值但我不知道该怎么做。

这是我的代码：

<canvas baseChart [data]="dashboard.graficoDespesaMensal.valorTotalDespesa"
                [labels]="dashboard.graficoDespesaMensal.descricaoCategoria" [options]="optionsGraficoDespesa"
                [chartType]="'doughnut'">
              </canvas>

  optionsGraficoDespesa: ChartOptions = {
    responsive: true,
    tooltips: {
      enabled: true,
      callbacks: {
        label: function (tooltipItem, data) {
          let label = data.labels[tooltipItem.index];
          let count: any = data
            .datasets[tooltipItem.datasetIndex]
            .data[tooltipItem.index];
          return label + ": " + new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(count);
        },
      },
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          let sum = 0;
          let dataArr = ctx.chart.data.datasets[0].data;
          dataArr.map(data => {
            sum += data;
          });
          let percentage = (value * 100 / sum).toFixed(2) + "%";
          return percentage;
        },
        color: '#fff',
      }
    }
  };

结果是：

不幸的是，我在 [options] 输入处使用的插件无法正常工作。我该如何解决这个问题？

【问题讨论】：

你是否包含了插件库？
@WhiteHat 对不起，我没有包括它。我不知道需要安装插件。我通过运行 npm i chartjs-plugin-datalabels 安装了这个插件 chartjs-plugin-datalabels 现在它正在工作......谢谢！
干杯！很高兴您能够解决...

标签： angular charts ng2-charts chartjs-2.6.0

【解决方案1】：

我通过以下方式解决了这个问题：

npm i chartjs-plugin-datalabels

组件：

import * as pluginDataLabels from 'chartjs-plugin-datalabels';

public chartPlugins = [pluginDataLabels];

  optionsGraficoDespesa: ChartOptions = {
    responsive: true,
    tooltips: {
      enabled: true,
      callbacks: {
        label: function (tooltipItem, data) {
          let label = data.labels[tooltipItem.index];
          let count: any = data
            .datasets[tooltipItem.datasetIndex]
            .data[tooltipItem.index];
          return label + ": " + new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(count);
        },
      },
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          let sum = 0;
          let dataArr: any[] = ctx.chart.data.datasets[0].data;
          dataArr.map((data: number) => {
            sum += data;
          });
          let percentage = (value * 100 / sum).toFixed(2) + "%";
          return percentage;
        },
        color: '#fff',
      }
    }
  };

HTML

<canvas baseChart data]="dashboard.graficoDespesaMensal.valorTotalDespesa"
[labels]="dashboard.graficoDespesaMensal.descricaoCategoria" [options]="optionsGraficoDespesa" [plugins]="chartPlugins"[chartType]="'doughnut'">

结果：

【讨论】：

【解决方案2】：

安装：

 npm install chartjs-plugin-labels

将此添加到您的 component.ts 文件中：

import 'chartjs-plugin-labels';

在图表选项中，添加：

plugins: {
  labels: {
    render: 'percentage',
    fontColor: 'white',
    fontSize: 10,
  },
},

【讨论】：