作者:Echocc07 | 来源:互联网 | 2022-11-30 10:33
如何解决《AngularPrimeng:错误ReferenceError:未在UIChart.initChart定义图表(chart.js:53)》经验,为你挑选了1个好方法。
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';
DirtyMind..
10
从您的问题和代码来看,您不清楚要执行哪些步骤。如果正确遵循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中:
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'
}
]
}
}
这就是我们要做的。
1> DirtyMind..:
从您的问题和代码来看,您不清楚要执行哪些步骤。如果正确遵循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中:
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'
}
]
}
}
这就是我们要做的。