我在Angular 7 / Typescript上工作,但是在使用ng2-charts时遇到了问题。我想使用输出(chartClick),但更改数据(带有一些HTML输入)后,它不再起作用。
HTML:
<canvas baseChart width="100%" height="50%" [datasets]="barChartData" [labels]="barChartLabels"
[options]="barChartOptions" chartType="bar" [colors]="colors" (chartClick)="chartClicked($event)">
</canvas>
组件:
chartClicked(event: any) {
if (event.active.length > 0) {
const chart = event.active[0]._chart;
const activePoints = chart.getElementAtEvent(event.event);
if ( activePoints.length > 0) {
........................................................
}
ngOnInit() {
for (const dataByValidationType of this.barChartData) {
if (!this.chartService.isDynamicStatusById(dataByValidationType.id,this.folder)) {
dataByValidationType.backgroundColor = patternomaly.draw('diagonal',dataByValidationType.backgroundColor,'#ffffff70',10);
}
dataByValidationType.borderColor = '#00000080';
dataByValidationType.borderWidth = 1;
}
this.chart.options = this.barChartOptions;
if (this.mode === EChartViewMode.validation) {
this.chart.options.scales.yAxes[0].scaleLabel.labelString = 'Nombre de visas';
} else {
this.chart.options.scales.yAxes[0].scaleLabel.labelString = 'Nombre de documents';
}
}
ngOnChanges(changes: SimpleChanges) {
if (changes.barChartData.firstChange) {
this.modifyColors();
}
if (!changes.barChartData.firstChange) {
this.reloadChart();
}
}
reloadChart() {
if (this.chart) {
// this.chart.chart.destroy();
this.chart.chart.update();
this.modifyColors();
this.chart.chart.options = this.barChartOptions;
this.chart.chart.data.labels = this.barChartLabels;
this.chart.chart.data.datasets = this.barChartData;
if (this.mode === EChartViewMode.validation) {
this.chart.chart.options.scales.yAxes[0].scaleLabel.labelString = 'Nombre de visas';
} else {
this.chart.chart.options.scales.yAxes[0].scaleLabel.labelString = 'Nombre de documents';
}
}
}
提前谢谢!