Угловое начало: ОШИБКА ReferenceError: Диаграмма не определена в UIChart.initChart (chart.js: 53)

Question

Angular Primeng: ERROR 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, вы сможете легко добиться этого. Ниже приведена пошаговая инструкция, которую я выполнил для запуска графика.

Я использую:

• Угловой 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'
                }
            ]
        }
}

Это все, что нам нужно сделать.