angular on更改高图表

Question

如果我选择另一个人，我有一个图表应该会更改显示的数据。当您尝试在console.log(this.pieChart)中显示时，一切正常。但与此同时，在选择了另一个人之后，图表本身不会重新绘制，而且他对图表的数据完全不同。

为什么会发生这种情况，我该如何解决？

小时：

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();
}

我甚至在图表上做了一个数据刷新按钮，但它不想被重新绘制。如何正确使用高图表？

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>

Answer 1

如果我错了，请纠正我，但我认为您正在寻找一种使用highcharts-angular包装器动态更新图表的方法。

如果是这样，为了使其工作，您所要做的就是更新传递给highcharts-chart组件的chartOptions的数据，并切换updateFlag。我可以看到您的pie.html缺少[(update)]输入，所以这可能是它不能正常工作的原因。

在这里，您可以找到更新图表的最佳方式的实时示例：https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update

您可以在这里找到更多信息，包括高图表角度文档中的实际示例：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;
}
}