chart.js图表循环使用

主要是使用的augular.js中 *ngFor方法
效果图：

//循环
 <div *ngFor="let item of sccharts; let idx = index"  class="{{getColSize()}}">
        <div class="card full-height" id="cardChart9">
           <canvas class="full-height col-12 info" 
                   baseChart
                   [chartType]="item.chartType"
                   [datasets]="item.chartData"
                   [labels]="item.chartLabels"
                   [options]="item.chartOptions"
                   [legend]="item.chartlegend"
                     >
           </canvas>      
        </div>
</div>

//定义
 chartTemplate = {
    chartOptions : {
      scales: {
      //设置x轴的备注
        xAxes: [{
           scaleLabel: {
              display: true,
              labelString: '1/min',  
              position: 'right',
              fontSize: 16,
            fontColor:'black',
          },
          gridLines: {
            color: "rgba(0,0,0,0.1)"
          },
        }],
        //y轴的数值
        yAxes: [{
          ticks: {
            min: 0,
            max: 30,
            fontSize: 14,
            fontColor:'black',
          },
          scaleLabel: {
            display: true
        }
        }]
      },
      responsive: true
     },
     //data数组
     chartData : [
      { 
      //图表曲线数据
        data: [0.8,3, 6.6, 11.5,17.7,25.4], 
        //曲线name
        label: 'Pressure Drop' ,  
        //曲线范围背景颜色
        backgroundColor: [
          'transparent'
        ],  
        //曲线颜色
        borderColor: [
          'rgba(114,102,186,1)'
        ],
        pointBackgroundColor: [
          'rgba(114,102,186,1)'
        ],
        //定义曲线的宽度
        borderWidth: 1.5,
     },
     { 
      data: [0.8,3, 6.6, 11.5,17.7,25.4], 
      label: '' , 
      backgroundColor: [
        'transparent'
      ],  
      borderColor: [
        'rgba(114,102,186,1)'
      ],
      pointBackgroundColor: [
        'rgba(114,102,186,1)'
      ],
      borderWidth: 1.5,
   }
    ],
    chartlegend:true,
    chartType: 'line',
    chartLabels : [0, 5, 10, 20,25,30,35],
  }

//渲染
   let  object = this.chartTemplate.chartData
    let arr = []
    arr.push(object[0])
    for(let i in object){
      let a ={
        chartData: arr,
        chartLabels: this.chartTemplate.chartLabels,
        chartOptions:this.chartTemplate.chartOptions,
        chartType: this.chartTemplate.chartType,
        chartlegend:this.chartTemplate.chartlegend
      }
      this.sccharts.push(a)
    }