Angular Primeng：错误ReferenceError：未在UIChart.initChart定义图表（chart.js：53）

Question

Angular Primeng：错误ReferenceError：未在UIChart.initChart定义图表（chart.js：53）

进口：

"../node_modules/chart.js/dist/Chart.js",

"../node_modules/chart.js/dist/Chart.bundle.js",

"../node_modules/chart.js/dist/Chart.min.js",

"../node_modules/chart.js/dist/Chart.bundle.min.js"

import { Chart } from 'chart.js';

import { ChartModule } from 'primeng/primeng';

Answer 1

从您的问题和代码来看，您不清楚要执行哪些步骤。如果正确遵循Primeng文档，则可以轻松实现。下面是我逐步运行图表的详细步骤。

我在用：

• 角度6
• primeng：^ 6.0.0
• chart.js：^ 2.7.2

首先安装图表js。

npm install chart.js --save

现在将chartjs添加到您的angular.json文件中。

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

无需在脚本中使用“ ../”。如果您的node_module和angular.json文件处于同一级别，则使用如下所示，这是默认行为：

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

在app.module.ts中

如问题中所述，仅导入ChartModule不会从Chart.js导入。

import {ChartModule} from 'primeng/chart';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    ChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在在您component.html中：

<p-chart type="line" [data]="data"></p-chart>

component.ts：

data: any;
ngOnInit() {

this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    borderColor: '#4bc0c0'
                },
                {
                    label: 'Second Dataset',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    fill: false,
                    borderColor: '#565656'
                }
            ]
        }
}

这就是我们要做的。