Angular PrimeNG p 图 chart.js 未显示

Question

我正在关注https://primefaces.org/primeng/showcase/#/chart/pie上的 p-chart aka chartjs 示例，但它未在页面上呈现。

我不确定我错过了什么步骤。 我使用了 chrome 工具，检查看到了 p-chart，但在页面上，它是白色的。

任何帮助表示赞赏。

我在另一篇文章中读到添加 angular.json

“脚本”：[

          "node_modules/chart.js/dist/chart.js"
        ]

在我的 html

<div class="container-fluid container-width"> 
    <div class="card">
      
            <p-chart type="pie" [data]="data" [options]="chartOptions"  [style]="{'width': '70%'}"></p-chart>
       
     </div>
</div>

在我的TS

  ngOnInit(): void {
    this.data = {
      labels: ['A','B','C'],
      datasets: [
          {
              data: [300, 50, 100],
              backgroundColor: [
                  "#42A5F5",
                  "#66BB6A",
                  "#FFA726"
              ],
              hoverBackgroundColor: [
                  "#64B5F6",
                  "#81C784",
                  "#FFB74D"
              ]
          }
      ]
  };

  this.chartOptions =  this.getLightTheme();
  }
 
  
getLightTheme() {
  return {
      plugins: {
          legend: {
              labels: {
                  color: '#495057'
              }
          }
      }
  }
}

在我的 app.module.ts

从'primeng/chart'导入{ChartModule}；

@NgModule({

  declarations: [
    SearchComponent,
    TableComponent,
    TrimPipe
  ],
  imports: [
    CommonModule,
    ChartModule
  ],
  exports: [],

  providers:[ConfirmationService, MessageService]
})

Answer 1

如果有人卡在 p-chart 什么都不显示的地方，请检查你的 chrome 控制台日志。 如果您收到任何 Is not a controller，请遵循此

卸载 chart.js 并安装 chart.js@2.9.4

终于找到一个解释发生了什么的帖子。

core.js:4197 错误类型错误：chart.js__WEBPACK_IMPORTED_MODULE_2__ 不是构造函数

希望这可以帮助。 我被困了2天。