javascript - Hur man loopar över på highcharts i angular


Jag skapar highcharts i Angular. Jag vill visa en highchart som motsvarar en viss bild, det finns flera bilder och för varje bild måste jag visa en highchart. Data för bilder och highcharts kommer från olika API:er. Jag lade till bilder i en loop och visar dem, men jag kan inte visa highcharts som motsvarar varje bild. Jag får inte olika containernamn (t.ex. container1, container2 osv.) eftersom seriedata ändras i loopen.

Jag har försökt detta hittills:

app.component.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>

app.component.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,
        });
      }
    });
}
}

Jag använder nedanstående data för Highcharts:

All hjälp skulle vara mycket uppskattad, tack i förväg :)