Question

我正在尝试在我的jhipster（弹簧/角形）项目中使用PrimeNG图表，而所有类型的图表（或其他PrimeNG组件）都根本不显示。我正在使用angular 7.3.7和primeng 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

最初的问题已经存在了几个月，但是随着PrimeNG 9.0.5在2020年4月仍然存在挑战。如果您按照官方文档中的说明安装了chart.js，并正确地导入并包括了所有组件，并且仍然只显示一个空的占位符而不是饼图，则以下过程可能会为您提供帮助：

HTML部分：

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

TypeScript部分：

@ViewChild('chart') chart: any;

[...]

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

PrimeNG图表未显示

1 个答案:

HTML部分：

TypeScript部分：