Primeng 饼图不显示

Question

我想在仪表板屏幕上显示饼图。按照 primefaces 网站中的示例进行操作。但它不起作用。下面是我的代码。请让我知道我是否缺少任何导入。

app.module.ts

   import {ChartModule} from 'primeng/primeng';

    @NgModule({
    --
    --
    imports: [
    --
    --
    ChartModule

component.ts

  piedata: any;


 ngOnInit() {

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

Html 页

<p-chart type="pie" [data]="piedata"></p-chart>

** 输出 **

Answer 1

您需要 chart.js 才能 function.do

npm install chart.js --save

并将其包含在您的 angular-cli.json 文件中

"scripts": [
 "../node_modules/chart.js/dist/Chart.js",
 //..others
 ],

希望对您有所帮助

更新：试试这个

 ngOnInit() {

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

Primeng 饼图不显示

Primeng Pie chart not displaying

angular

primeng