如何在Angular8中渲染多个Plotly图？

Question

我一直试图在 Angular8 中绘制多个“忠诚” 图。我有加速度XYZ，方向XYZ的传感器数据，每个数据都有簇值。

数据存储在CSV文件中，我将文件添加到资产文件夹中，然后在我的components.ts文件中调用。然后在我的“ component.html”文件中添加以下行：

<plotly-plot [data]="data" [layout]="graph.layout"></plotly-plot>

如何在“ components.ts”和“ components.html”中添加唯一标识每个图的“ id”引用？

注意：我将文件命名为：“ cluster.component.ts” 和“ clusterview.components.html” 。

在cluster.coponent.ts中找到我的代码

import { Papa } from 'ngx-papaparse';



@Component({
  selector: 'app-clusterview',
  templateUrl: './clusterview.component.html',
  //template: '<plotly-plot [data]="data" [layout]="graph.layout"></plotly-plot>',
  // styleUrls: ['./clusterview.component.scss']
})
// export class ClusterviewComponent implements OnInit {
//   constructor() { }
//   ngOnInit() {
//   }
// }

export class ClusterviewComponent {

public dataResult = [];
public data = [];
constructor(private papa: Papa) {
  const csvData = '"Hello","World!"';
  let dataResult = []

  this.papa.parse('assets/Acceleration_Cluster_no7.csv',{
    download: true,
    header: true,
    complete: (result) => {

          console.log('Parsed: ', result);
          const data=[];
          for(let i = 0; i < 7;i++){
            data.push(this.transform(result.data,i))
          }
          this.data = data;

      }


  });

}

  public graph = {
      data: [
          { x: [1, 2, 3], y: [2, 6, 3], z: [2, 6, 3], type: 'scatter3d', mode: 'markers', marker: {color: 'red', symbol:'circle', line: {'width':2} } },
          //{ x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
      ],
      layout: {width: 700, height: 700, title: 'A Fancy Plot'}
  };

  public graph1 = {id:'graph1',
    data: [
        { x: [1, 2, 3], y: [2, 6, 3], z: [2, 6, 3], type: 'scatter3d', mode: 'markers', marker: {color: 'red', symbol:'circle', line: {'width':2} } },
        //{ x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
    ],
    layout: {width: 700, height: 700, title: 'Orientation Sensors',}
};



  transform(data:any[],cluster:number){
    const result = { 
      x:[],
      y:[],
      z:[],
      type: 'scatter3d', 
      mode: 'markers', 
      marker: {color: this.getColor(cluster), symbol:'circle', line: {'width':2} }
    }
    result.x = this.getAxisData('X', data, cluster);
    result.y = this.getAxisData('Y', data, cluster);
    result.z = this.getAxisData('Z', data, cluster);
    return result;
  }
  getAxisData(axis:string,data:any[],cluster:number){
    return data.filter(dt=>parseInt(dt.Clusters)===cluster).map(dt=>parseFloat(dt[`Acc_${axis}`]));
  }
  getColor(cluster:number){
    if(cluster===0) return 'red';
    if(cluster===1) return 'blue';
    if(cluster===2) return 'yellow';
    if(cluster===3) return 'green';
    if(cluster===4) return 'orange';
    if(cluster===5) return 'cyan';
    if(cluster===6) return 'purple';
    return 'black';


  }
}```

Thank you.