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 

，包括在你的角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" 
        ] 
       }] 
      }; 
}