PrimeNG图表js不渲染答案

【问题标题】：PrimeNG chart js is not renderingPrimeNG图表js不渲染
【发布时间】：2022-01-11 13:20:18
【问题描述】：

我在 Angular 组件中显示 chart-js 时遇到问题：没有显示类型栏的图表，我将其作为 html 渲染：

<div _ngcontent-tkd-c175="" class="p-col-6">
   <p-chart _ngcontent-tkd-c175="" type="bar">
</p-chart></div>

我的模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {KpisComponent} from './kpis.component';
import {BrowserModule} from '@angular/platform-browser';
import {
  ChartModule
} from 'primeng/chart';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ButtonModule} from "primeng/button";



@NgModule({
  declarations: [KpisComponent],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    ChartModule,
    ButtonModule
  ]
})
export class KpisModule { }

我的组件的html：

<div class="p-col-6">
      <p-chart #chart type="bar" [data]="dataSource"></p-chart>
  </div>

<button type="button" pButton (click)="update($event)" >Update</button>

我的组件 ts

import {UIChart} from "primeng/chart";
@Component({
  selector: 'app-kpis',
  templateUrl: './kpis.component.html',
  styleUrls: ['./kpis.component.scss']
})
export class KpisComponent implements OnInit {

    @ViewChild('chart') chart: UIChart;
    public dataSource = {} as any;
    public options: any;
  constructor(
    private kpisService: KpisService
  ) {
  }


  ngOnInit(): void {
      this.options = {
          title: {
              display: true,
              text: 'My Title',
              fontSize: 16
          },
          legend: {
              position: 'bottom'
          }
      };

  }



    update($event: MouseEvent) {
        this.dataSource = {
            labels: ["2015", "2016", "2017", "2018", "2019", "2020"],
            datasets: [{
                label: "Company1",
                data: [25, 30, 60, 50, 80, 90]
            },
                {
                    label: "Company2",
                    data: [45, 33, 70, 72, 95]
                }
            ]
        };
    }
}

我的 package.json 依赖项：

"dependencies": {
    "@angular-material-components/datetime-picker": "^6.0.3",
    "@angular/animations": "~11.1.0",
    "@angular/cdk": "~11.1.0",
    "@angular/common": "~11.1.0",
    "@angular/compiler": "~11.1.0",
    "@angular/core": "~11.1.0",
    "@angular/forms": "~11.1.0",
    "@angular/material": "^12.1.3",
    "@angular/platform-browser": "~11.1.0",
    "@angular/platform-browser-dynamic": "~11.1.0",
    "@angular/router": "~11.1.0",
    "@fullcalendar/core": "^5.4.0",
    "@ngx-translate/core": "~13.0.0",
    "@ngx-translate/http-loader": "~4.0.0",
    "angular2-csv": "^0.2.9",

    "chart.js": "^2.9.4",

    "classlist.js": "~1.1.20150312",
    "core-js": "~2.5.4",
    "file-saver": "^2.0.5",
    "font-awesome": "~4.7.0",
    "primeflex": "^1.0.0",
    "primeicons": "^4.1.0",

    "primeng": "^11.3.1"
...
}

我在 angular.json 中添加了脚本：

"architect": {
        "build": {
    ...
            "scripts": [
             "node_modules/chart.js/dist/Chart.js"
            ],
    ...

但是当我点击更新按钮时，组件中没有呈现任何内容。

我错过了什么吗？提前致谢。

【问题讨论】：

您的代码错过了传递基本选项对象...看看这里的示例 --> primefaces.org/primeng/showcase/#/chart/bar
更新数据后可能需要重新渲染图表
我可以在这里看到，这些选项不是必需的：primefaces.org/primeng/v11-lts/#/chart
我试过这个 setTimeout(() => { this.chart.refresh(); }, 100);在更新函数结束时出现此错误：ERROR TypeError: _this.chart.refresh is not a function
"为了让图表重绘自身，需要创建一个新的数据对象。更改数组内容而不创建新的数组实例不会触发更改检测。"基本上你在做什么，你正在改变你的数组。通过扩展操作或其他方式创建数组的新实例。

标签： javascript angular chart.js primeng

【解决方案1】：

问题不在chartjs或PrimeNG中，但包含图表组件的模块未在应用模块中导入，

@NgModule({
  declarations: [
    ...
  ],
    imports: [
        ...
        KpisModule   <-- here
    ],
 ...
  bootstrap: [AppComponent]
})
export class AppModule {...

添加它解决了我的问题。

【讨论】：