如何使用 angular 12 在頂點圖表中綁定來自 api 的值

Question

我想在頂點圖表區域圖中綁定來自 api 的值

應用程序.comp.ts

salesforpurchase : result[]
 this.service.sales().subscribe (data=> {
      this.salesforpurchase=data.data

在 result[] 中，值將是

日期：2012-03-02，銷量：256

等等...

 intializationChartoption():void {
    this.title ={
      text: 'linechart'
    };

  this.series = [{
         name: 'Purchase',
         data: [20,10,300] //static data . Here i want to bring sales value from result[]
       }]
     
      

    this.chart ={
      type: 'area',
      width :650,
      
    };
  }

html

<apx-chart [series]="series" [chart]="chart" [title]="title"
></apx-chart>

請幫助我如何將數據動態綁定到頂點圖表

Answer 1

您只需要更新系列值並重新簽名，因此頂點圖表會檢測系列上的更改並嘗試更新圖表。

我做了一個關於 stackblitz 每隔幾秒隨機化第一個值的簡單示例。 在您的情況下，每次您從 api 獲得值時，您都會相應地准備數據，然后重新分配系列。

https://stackblitz.com/edit/angular-ivy-xkbqdb?file=src/app/app.component.ts

Answer 2

首先要注意的是在訂閱回調中初始化值。 換句話說，您需要訂閱需要響應的可觀察對象。

其次，要僅獲取數組的每個 object 的sales屬性作為它自己的數組，可以使用Array#map function。

嘗試以下

ngOnInit() {
  this.service.sales().subscribe(
    (data: any) => {
      this.intializationChartoption(  // <-- this call *must* be inside the subscription callback
        data.map((item: any) => item.sales)
      );
    },
    error => {
      // handle errors
    }
  );
}

intializationChartoption(series: number[]): void {
  this.title ={
    text: 'linechart'
  };

  this.series = [{
    name: 'Purchase',
    data: series
  }];

  this.chart = {
    type: 'area',
    width :650,
    };
  }
}