PrimeNG图表不显示

Question

我试图在我的jhipster(spring/ PrimeNG )项目中使用PrimeNG图表，而所有类型的图表(或其他PrimeNG组件)都没有显示。我用的是角7.3.7和角7.1.3。我确实看到了一些报告的问题，并尝试了不同的解决方案，但没有结果。

Html页面

<p-chart type="bar" width="400" height="400" [data]="data" [options]="options"></p-chart>

组件代码

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'jhi-statistics',
    templateUrl: './statistics.component.html',
    styles: []
})
export class StatisticsComponent implements OnInit {

    data: any;

    constructor() {
        this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'My First dataset',
                    backgroundColor: '#42A5F5',
                    borderColor: '#1E88E5',
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: 'My Second dataset',
                    backgroundColor: '#9CCC65',
                    borderColor: '#7CB342',
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        }
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartModule } from 'primeng/primeng';
...

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ...
        ChartModule
    ],
    ...

vendor.css

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~primeng/resources/primeng.min.css';

不过，我没有错。我是不是遗漏了什么？任何帮助都将不胜感激。

Answer 1

最初的问题已经存在了几个月，但到2020年4月，PrimeNG 9.0.5仍然存在这一挑战。如果您安装了正式文档中描述的chart.js，正确导入并包含了所有组件，并且仍然只显示了一个空占位符，而没有显示饼图，那么以下过程可能会对您有所帮助：

HTML部件：

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

TypeScript部件：

@ViewChild('chart') chart: any;

[...]

ngOnInit(): void {
  setTimeout(() => {
    this.chart.refresh();
  }, 100);
}