ng2-charts を使用してデータを表示するグラフを取得しようとしています。モックアップ データを使用するとすべて正常に動作しますが、親コンポーネントから渡された配列を反復処理しようとすると、グラフ自体は表示されず、直交マークのみが表示され、コンソールには何も表示されません。問題をラベル配列に絞り込みました。 LineChartComponent のコメント行を削除すると機能します。
これが私のコードです:
import { Component, Input } from '@angular/core';
import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
import { Traffic } from './traffic';
@Component({
selector: 'line-chart-component',
directives: [CHART_DIRECTIVES],
styles: [`
.chart {
display: block;
}
`],
template: `
<div style="display: block">
<canvas baseChart
[datasets]="datasets"
[labels]="labels"
[chartType]="'line'"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
`
})
export class LineChartComponent {
_dataArray: Traffic[] = [];
private datasets = [
{
label: "Desktop",
data: []
}
];
private labels: string [] = [];
@Input()
set dataArray(dataArray: Traffic[]) {
dataArray.forEach((data: any,index: number) => {
this.datasets[0].data.push(Math.round(data.Value));
this.labels.push(data.Date));
});
// this.labels = ['0','1','2','3','4','5','6','7','8','9','10','11'];
}
get dataArray() { return this._dataArray; }
private options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
}
注意: 未定義の配列はありません。そして、どちらも適切な構造を持ち、すべてのデータを含み、適切な型付けをしています。また、Data.date
文字列を返します。
何がそのような行動につながる可能性がありますか?
ありがとう !