Question

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

导入：

<?xml version="1.0" encoding="utf-8"?>

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'
                }
            ]
        }
}

这就是我们要做的。

Answer 2

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

import {DropdownModule} from "primeng";

代替此：

import {DropdownModule} from "primeng/dropdown";

那给了我“ chart.js”错误……导入正确的路径（下一个）后，chart.js错误就消失了。我在Stackoverflow上看到了一些其他响应，即使在以前的角度版本中，它们也遇到了类似问题（错误导入了某个组件）。因此，如果您未以正确的方式导入组件，则在angular9中肯定仍然会发生这种情况。

Answer 3

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

在Angular和其他平台中，构建您的应用程序时，它会将脚本捆绑到一个文件中，并将该文件附加到索引页。如果未捆绑Chart.JS脚本Chart，PrimeNG用来构建图形的类将不存在。

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

Answer 4

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

角 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/ 我引用它们：

<块引用>

以前的版本

<块引用>

要从版本 2 迁移到版本 3，请参阅 v3 迁移指南。

<块引用>

版本 3 的 API 与早期版本有很大不同。

<块引用>

大多数早期版本选项具有当前等效项或相同。

<块引用>

请注意 - 先前版本的文档可在线或在 GitHub 存储库中获得。

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

Angular Primeng：错误参考错误：UIChart.initChart（chart.js：53）上未定义图表

4 个答案: