Estoy creando gráficos altos en angular. Quiero mostrar un gráfico alto correspondiente a una imagen en particular, hay varias imágenes y para cada imagen tengo que mostrar un gráfico alto. los datos para imágenes y gráficos altos provienen de diferentes api. Agregué imágenes en un bucle y las mostré, pero no puedo mostrar gráficos altos correspondientes a cada imagen. No obtengo nombres de contenedores diferentes (es decir, contenedor1, contenedor2, etc.) porque los datos de la serie cambian en el ciclo for.

Intenté esto hasta ahora:

aplicación.componente.html:

 <div class="col-md-6"> <div class="row align-items-center h-100 "> <div class="col" *ngFor="let conts of container1;let i= index"> <div id="{{'container'+i}}" style="min-width: 70px; height: 70px;"> </div> </div> </div>

aplicación.componente.ts:

 getData(data_id) { for (let i = 0, j = data_id.length; i < j; i++) { this._Service .get(data_id[i]) .subscribe((data: any) => { //console.log(data); const seriesNames = [...new Set(data.data.map((d) => d[2]))]; const series = seriesNames.map((seriesName) => { return { name: seriesName, data: data.data .filter((d) => d.includes(seriesName)) .map((d) => [d[0], d[1]]), }; }); console.log(series); var tempArray1 = []; var tempArray; for (i = 0; i < series.length; i += 1) { //here i am dividing that series data to display it corresponding to each image tempArray = series.slice(i, i + 1); console.log(tempArray); var container: any = "container"; var func_name: any = "container" + i; this.multiGraph = this.container1.push(container); console.log(this.container1); Highcharts.chart({ chart: { renderTo: container, type: "bar", }, title: { text: "", }, credits: { enabled: false, }, xAxis: { tickInterval: 1, }, yAxis: { minorTickInterval: 0.1, }, tooltip: { // headerFormat: "<b>{series.name}</b><br />", pointFormat: "{point.x}: {point.y}", }, series: tempArray, }); } }); } }

Estoy usando los siguientes datos para gráficos altos:

Cualquier ayuda sería muy apreciada, gracias de antemano :)