我有一个图表，如果我选择其他人，该图表应该更改显示的数据。当您尝试显示console.log(this.pieChart)所有内容时，一切正常。但是同时，在选择另一个人之后，图表本身不会重绘，并且他拥有完全不同的图表数据。
为什么会发生这种情况，我该如何解决？
hours.ts：
hours: Hour[];
pieChart = [];
pieCategoryChart = [];
loading: boolean = false;
@Input('people_id') people_id: number;
ngUnsubscribe: Subscription;
constructor(
private cdr: ChangeDetectorRef,
private _hoursService: HoursService,
private _toast: ToastrService
) {
cdr.detach();
}
ngOnChanges() {
this.load();
}
load() {
this.loading = true;
this.ngUnsubscribe = this._hoursService.fetch(this.people_id).subscribe((hours) => {
this.hours = hours;
this.pieChart = this.hours.map(hour => ({
name: hour.activity,
y: hour.hours,
color: hour.color
}));
this.loading = false;
this.cdr.detectChanges();
}, error => {
this._toast.error(error.message);
this.loading = false;
})
}
ngOnDestroy() {
this.ngUnsubscribe.unsubscribe();
}
我什至在图表上做了一个数据刷新按钮，但它不想重绘。如何正确处理highcharts？
hours.html：
<div *ngIf="hours">
<button (click)="load()">Test</button>
<app-pie [data]="pieChart"></app-pie>
</div>
people.html：
<app-hours *ngIf="people?.person_id" [people_id]="people.person_id"></app-hours>
pie.html：
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"
style="width: 100%; height: 400px; display: block;">
</highcharts-chart>
如果我错了，请纠正我，但我认为您正在寻找一种使用highcharts-angular包装器动态更新图表的方法。
如果是这样，则只需更新chartOptions要传递给highcharts-chart组件的数据并切换即可updateFlag。我可以看到您的pie.html缺少[(update)]输入，因此这可能是其无法正常工作的原因。
在这里，您可以找到有关更新图表的最佳方法的实时示例：https : //stackblitz.com/edit/highcharts-angular-optimal-way-to-update
您可以在highcharts-angular文档中找到更多信息，包括实时示例，可以在这里找到：https : //github.com/highcharts/highcharts-angular
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
[(update)]="updateFlag"
>
<button (click)="onClick()">Update data</button>
export class AppComponent {
Highcharts: typeof Highcharts = Highcharts;
updateFlag = false;
data = [1, 2, 3, 4];
chartOptions: Options = {
series: [
{
type: 'line',
data: this.data
}
]
}
onClick() {
this.chartOptions.title = {
text: 'updated'
};
this.chartOptions.series = [{
type: 'line',
data: this.data.reverse()
}
]
this.updateFlag = true;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句