角度初始化:错误引用错误:未在UIChart.initChart(Chart.js:53)中定义图表

从您的问题和代码来看,不太清楚您采取了哪些步骤来实现这一点。如果您正确地遵循打底文档,您可以轻松实现这一点。

我正在使用:

• 角度6
• 涂底漆:^6.0.0
• chart.js:^2.7.2

首先,安装ChartJS。

npm install chart.js --save

现在将chartjs添加到您的 angular.json

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

脚本中不必使用“./”。如果您的node_模块和angular.json文件处于同一级别,则使用如下方式,这是默认行为:

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

在app.module.ts中

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>

组件1.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'
                }
            ]
        }
}

这就是我们需要做的。

这个问题已经有了一个公认的答案,但作为记录,我在Angular 9中遇到了完全相同的“chart.js”错误,根本原因是我导入的组件没有完整的路径。我是这样做的:

import {DropdownModule} from "primeng";

与此相反:

import {DropdownModule} from "primeng/dropdown";

这给了我一个“chart.js”错误。。。我一导入正确的路径(底部路径),chart.js错误就消失了。我在Stackoverflow上看到了一些类似的响应,这些响应针对的是其他组件,这些组件甚至在以前的angular版本中也存在类似问题(错误导入了某些组件)。因此,如果没有正确导入组件,angular9中肯定还会发生这种情况。

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

在Angular和其他平台中,当您的应用程序构建时,它会将您的脚本捆绑到一个文件中,并将该文件附加到您的索引页。如果Chart.JS脚本没有绑定,Chart,则构建图形所依赖的类priming将不存在。

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

我也犯了同样的错误,但我最终还是解决了。

• 角度8
• 涂底漆:^8.0.0

当我刚刚使用

npm install chart.js --save

安装了最新版本的Chart.js(3.3.2),上面的错误也向我显示了出来。

https://www.chartjs.org/docs/master/developers/ 我引用他们的话:

以前的版本

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

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

请注意-以前版本的文档可在线或在GitHub repo中获得。

然后我降级到