web-dev-qa-db-fra.com

Angular Primeng: ERROR ReferenceError: Chart n'est pas défini dans UIChart.initChart (chart.js: 53)

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

Importé:

"../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';
angularchartsprimengangular-chart
6
Radhika Kandasamy

D'après votre question et votre code, il n'est pas très clair quelles sont les étapes que vous avez suivies pour y parvenir. Si vous suivez correctement la documentation Primeng, vous pouvez y parvenir facilement. Voici le détail étape par étape que j'ai suivi pour exécuter le graphique.

J'utilise:

  • Angulaire 6
  • primeng: ^ 6.0.0
  • chart.js: ^ 2.7.2

Installez d'abord le tableau js.

npm install chart.js --save

Ajoutez maintenant les chartjs dans votre fichier angular.json.

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

il n'est pas nécessaire d'utiliser "../" dans votre script. Si votre fichier node_module et angular.json sont au même niveau, utilisez comme ci-dessous et c'est le comportement par défaut:

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

Dans app.module.ts

Importez uniquement ChartModule n'importez pas depuis Chart.js comme vous l'avez mentionné dans votre question.

import {ChartModule} from 'primeng/chart';

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

Maintenant dans vous 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'
                }
            ]
        }
}

C'est tout ce que nous devons faire.

11
DirtyMind