javascript - วิธีการวนลูปใน highcharts บน angular

ฉันกำลังสร้าง Highcharts ใน Angular ฉันต้องการแสดง Highchart ที่สอดคล้องกับภาพเฉพาะ มีหลายภาพและสำหรับแต่ละภาพฉันต้องแสดง Highchart ข้อมูลสำหรับภาพและ Highchart มาจาก API ที่ต่างกัน ฉันเพิ่มภาพในลูปและแสดงมัน แต่ฉันไม่สามารถแสดง Highcharts ที่สอดคล้องกับแต่ละภาพได้ ฉันไม่ได้รับชื่อคอนเทนเนอร์ที่แตกต่างกัน (เช่น container1, container2 ... เป็นต้น) เนื่องจากข้อมูล series เปลี่ยนแปลงในลูป

ฉันได้ลองสิ่งนี้มาจนถึงตอนนี้:

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

ฉันกำลังใช้ข้อมูลด้านล่างสำหรับ Highcharts:

ความช่วยเหลือใด ๆ จะได้รับความซาบซึ้งอย่างมาก ขอบคุณล่วงหน้า :)