我正在使用Angular 6
和ng2-charts
在我的component.html
文件中
<canvas baseChart id="barChartSimpleGradientsNumbers"
[datasets]="lineChartGradientsNumbersData"
[labels]="lineChartGradientsNumbersLabels"
[colors]="lineChartGradientsNumbersColors"
[options]="lineChartGradientsNumbersOptions"
[chartType]="lineChartGradientsNumbersType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
和component.ts
文件中
export class DashboardComponent implements OnInit {
public lineChartGradientsNumbersType;
public lineChartGradientsNumbersData: Array<any>;
public lineChartGradientsNumbersOptions: any;
public lineChartGradientsNumbersLabels: Array<any>;
public lineChartGradientsNumbersColors: Array<any>;
constructor(
private graphDataService: GraphDataService
) { }
ngOnInit() {
this._initializeGraphDemo();
this.graphTopTen(this.topTenDataType);
}
_initializeBarGraph() {
...
this.lineChartGradientsNumbersData = [
{
label: '',
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
fill: true,
borderWidth: 1,
data: [80, 99, 86, 96, 123, 85, 100, 75, 88, 90]
}
];
this.lineChartGradientsNumbersLabels = [
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October'
];
this.lineChartGradientsNumbersType = 'bar';
}
/**
* Get top ten
* @param filter_type
*/
graphTopTen(filter_type: string) {
this.topTenDataType = filter_type;
this.graphDataService.topTen(filter_type).subscribe(
res => {
const data_value = [];
const data_label = [];
res.forEach(e => {
data_label.push(e.contact);
data_value.push(e.value);
});
// Set graph data: This is working
this.lineChartGradientsNumbersData = [
{
label: 'Amount' + filter_type,
data: data_value
}
];
// This is not working
this.lineChartGradientsNumbersLabels.splice(0);
this.lineChartGradientsNumbersLabels = data_label;
}
);
}
}
在 graphTopTen()函数中,this.lineChartGradientsNumbersData
更新良好,但this.lineChartGradientsNumbersLabels = data_label;
未更新图形的标签,并且仍然与January, February...
相同。