У меня есть приложение Angular 7, и я хочу использовать ng2-charts для рисования диаграмм. Мое приложение доступно здесь, на GitHub .
Я следовал руководству по установке библиотеки, которая доступна здесь :
npm install --save ng2-charts
npm install --save chart.js
Я создал компонент и добавил следующий код:
Шаблон
<div style="display: block;" class="chart">
<canvas baseChart
[datasets]="labelMFL"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
Класс компонентов:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bar-chart',
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.less']
})
export class BarChartComponent {
public SystemName: string = "MF1";
firstCopy = false;
// data
public lineChartData: Array<number> = [ 1,8,49,50,51];
public labelMFL: Array<any> = [
{ data: this.lineChartData,
label: this.SystemName
}
];
// labels
public lineChartLabels: Array<any> = ["2018-01-29 10:00:00", "2018-01-29 10:27:00", "2018-01-29 10:28:00", "2018-01-29 10:29:00", "2018-01-29 10:30:00" ];
constructor( ) { }
public lineChartOptions: any = {
responsive: true,
scales : {
yAxes: [{
ticks: {
max : 60,
min : 0,
}
}],
xAxes: [{
min: '2018-01-29 10:08:00', // how to?
// max: '2018-01-29 10:48:00', // how to?
type: 'time',
time: {
unit: 'minute',
unitStepSize: 10,
displayFormats: {
'second': 'HH:mm:ss',
'minute': 'HH:mm:ss',
'hour': 'HH:mm',
},
},
}],
},
};
_lineChartColors:Array<any> = [{
backgroundColor: 'red',
borderColor: 'red',
pointBackgroundColor: 'red',
pointBorderColor: 'red',
pointHoverBackgroundColor: 'red',
pointHoverBorderColor: 'red'
}];
public lineChartType = 'line';
public chartClicked(e: any): void {
console.log(e);
}
public chartHovered(e: any): void {
console.log(e);
}
}
Затем я создал его в другом компоненте:
<app-card title="Graph" showTextContent="false">
<app-bar-chart></app-bar-chart>
</app-card>
Когда я запускаю приложение, я получаю следующую ошибку:
Я думал, что есть некоторые проблемы с chart.js, но я не знаю, нужно ли мне его где-то добавлять, например, файл angular.json.
Я что-то упустил в конфигурации?
Есть ли проблемы с версией библиотек?