angular onChanges highcharts

Question

如果我選擇另一個人，我有一個圖表應該改變顯示的數據。 當您嘗試在console.log(this.pieChart)顯示時，一切正常。 但同時，圖表本身不會在另一個人被選中后重新繪制，他的圖表數據完全不同。

為什么會發生這種情況，我該如何解決？

小時.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？

小時.html：

<div *ngIf="hours">
    <button (click)="load()">Test</button>
    <app-pie [data]="pieChart"></app-pie>
</div>

人們.html：

 <app-hours *ngIf="people?.person_id" [people_id]="people.person_id"></app-hours>

餡餅.html：

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"
    style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

Answer 1

如果我錯了，請糾正我，但我認為您正在尋找一種使用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;
  }
}