如何使用 JavaScript 或 Angular 在 PrimeNG（图表）的饼图内显示值

Question

我已经从 PRIMENG CHART PLUGIN 导入了饼图

我需要在饼图中显示值

下面是我的代码请参考

**In app.component.html**

<div style="display: block">
    <p-chart type="pie" [data]="data"></p-chart>
</div>

**In app.component.ts**

export class PieChartDemo {

    data: any;

    constructor() {
        this.data = {
            labels: ['A', 'B', 'C'],
            datasets: [{
                data: [300, 50, 100],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }]
        };
    }
}

在图片中我附上了没有显示任何值的图表

如果有负数--50

和积极的 -- 50

这些值应该显示在图表中

实际结果：

截至目前，图表中未显示这些值

预期结果：

这些值应该显示在图表内 The graph UI without the values displayed inside the graph

Answer 1

来晚了，我想你已经找到了答案，但对于未来的人来说，这可以通过以下方式实现：

安装插件：npm install chartjs-plugin-datalabels --save

它将被全局注册，我们需要注销它，以便仅包含某些图表；例如，将其放置在根组件的 init 方法中

 import * as Chart from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 ...

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
   chartJs = Chart;
   chartLabelPlugin = ChartDataLabels;

   constructor() {
   }

   ngOnInit(): void {
     this.chartJs.plugins.unregister(this.chartLabelPlugin);
  }
}

为特定图表添加插件

import ChartDataLabels from 'chartjs-plugin-datalabels';
...

plugin = ChartDataLabels; 
options = {
  plugins: {
   datalabels: {
     /* show value in percents */
     formatter: (value, ctx) => {
       let sum = 0;
       const dataArr = ctx.chart.data.datasets[0].data;
       dataArr.map(data => {
             sum += data;
       });
       const percentage = (value * 100 / sum); 
       return percentage !== 0 ? percentage.toFixed(2) + '%' : '';
     },
     color: '#fff',
   }
  }
}



<-- html -->

 <p-chart [options]="options" 
          [data]="dataset" 
          [plugins]="plugin" 
          type="pie">
 </p-chart>

<-- html -->

Answer 2

这个答案是正确的，但是在 app.component.ts 你必须导入 chartjs-plugin-datalabels

像这样：从 'chartjs-plugin-datalabels';

导入 * 作为 ChartDataLabels

不是这样的：从 'chartjs-plugin-datalabels';

导入 ChartDataLabels

非常感谢你Alexey.S！

如何使用 JavaScript 或 Angular 在 PrimeNG（图表）的饼图内显示值

How to display the values inside the pie chart of PrimeNG (chart) using JavaScript or Angular

javascript

charts

chart.js

primeng

angular