如何使用 angular 12 在顶点图表中绑定来自 api 的值

Question

我想在 apexchart 面积图中绑定来自 api 的值

app.comp.ts

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

在 result[] 中，值将为

日期：2012-03-02， sales: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

首先要注意的是在订阅回调中初始化值。换句话说，您需要在需要响应的地方订阅可观察对象。

其次，要仅获取数组中每个对象的 sales 属性作为它自己的数组，您可以使用 Array#map 函数。

尝试以下方法

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,
    };
  }
}

如何使用 angular 12 在顶点图表中绑定来自 api 的值

how to bind the values from api in apex chart using angular 12

javascript

typescript

angular

angular12

ng-apexcharts