Quiero vincular los valores de api en el gráfico de área de apexchart
app.comp.ts
salesforpurchase : result[] this.service.sales().subscribe (data=> { this.salesforpurchase=data.dataEn result[] , los valores serán
fecha:2012-03-02, ventas:256
y así...
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>Por favor, ayúdenme a vincular los datos dinámicamente al gráfico de vértice
Solo tendría que actualizar los valores de la serie y reasignarlos, por lo que el gráfico de vértice detectaría cambios en la serie e intentaría actualizar el gráfico.
Hice un ejemplo rápido en stackblitz aleatorizando el primer valor cada pocos segundos. En su caso, cada vez que obtiene un valor de su API, prepara sus datos en consecuencia y luego reasigna la serie.
https://stackblitz.com/edit/angular-ivy-xkbqdb?file=src/app/app.component.ts
Lo primero que debe notar es inicializar el valor dentro de la devolución de llamada de suscripción. En otras palabras, necesitaría suscribirse al observable donde se requiere su respuesta.
En segundo lugar, para obtener solo la propiedad de sales de cada objeto de la matriz como su propia matriz, puede usar la función Array#map .
Prueba lo siguiente
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, }; } }