Angular Primeng: ERROR ReferenceError: Chart is not defined at 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 文档，你可以很容易地做到这一点。下面是我按照运行绘制图表的详细步骤。

我正在使用：

Angular 6
primeng: ^6.0.0
chart.js: ^2.7.2

首先安装chart 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'
                }
            ]
        }
}

这就是我们需要做的。

Answer 2

这个问题已经有了一个可接受的答案，但是，为了记录，我运行在 Angular 9 中遇到了完全相同的“chart.js”错误，根本原因是我正在导入没有完整路径的组件。我是这样做的：

import {DropdownModule} from "primeng";

而不是这个：

import {DropdownModule} from "primeng/dropdown";

这给了我“chart.js”错误...一旦我导入了正确的路径（底部），chart.js 错误就消失了。我在 Whosebug 上看到了一些其他类似的响应，其他组件甚至在以前的 angular 版本中也有类似的问题（错误导入某些组件）。因此，如果您没有以正确的方式导入组件，这肯定仍然会在 angular9 中发生。

Answer 3

似乎所有这些答案都集中在正确安装 PrimeNG 和 Chart.js 上。您需要检查的另一件事是是否将正确的 JS 文件与您的应用程序捆绑和构建。这可能是 Webpack / CommonJS 的问题。

在 Angular 和其他平台中，构建您的应用程序时，它会将您的脚本捆绑到一个文件中，并将该文件附加到您的索引页。如果 Chart.JS 脚本没有被捆绑，Chart，class PrimeNG 依赖于构建你的图表将不会存在。

最简单的答案可能是在标记中添加 Chart.JS 脚本引用。

Answer 4

我有同样的错误，但我最终解决了。我正在与

合作

Angular 8
primeng: ^8.0.0

当我刚刚安装 Chart.Js 使用

npm install chart.js --save

已安装最新版本的 Chart.js (3.3.2)，上面的错误也显示给我。

Chart.js 的官方文档中的这一段让我感到困惑 https://www.chartjs.org/docs/master/developers/ 我引用他们的话：

Previous versions

To migrate from version 2 to version 3, please see the v3 migration guide.

Version 3 has a largely different API than earlier versions.

Most earlier version options have current equivalents or are the same.

Please note - documentation for previous versions are available online or in the GitHub repo.

然后我降级为 Chart.js@2.9.2 一切顺利。

Angular Primeng: ERROR ReferenceError: Chart is not defined at UIChart.initChart (chart.js:53)

Angular Primeng: ERROR ReferenceError: Chart is not defined at UIChart.initChart (chart.js:53)

charts

angular-chart

primeng

angular