chart.js多Y轴图表

<canvas class="full-height  info" 
        [chartType]="chartTemplate.chartType"
        [datasets]="chartTemplate.chartData"
        [labels]="chartTemplate.chartLabels"
        [options]="chartTemplate.chartOptions"
        [legend]="chartTemplate.chartlegend"
       >
</canvas> 

 chartTemplate = {
    chartOptions : {
      title: {
        display: true,
        padding:15,
        text: ['Rotation deg','Extention %','Bend deg'],
        fontSize:14,
        position:'left',
        fontColor:'#6f7173',
        fontFamily:'Arial',
        fontStyle:'normal'
    },
      scaleShowVerticalLines: false,
      responsive: true,
      // 大小自适应
      animation: false,
      scales: {
        yAxes: [{
          id: 'Rotation',
          type: 'linear',
          position: 'left',
          ticks: {
            max: 20,
            stepSize:5,
            fontColor:'#0000ff',
            min:-20
          },
          gridLines: {
            display: true,
            color:"#2b323b"
          }
          
        }, {
          id: 'Extention',
          type: 'linear',
          position: 'left',
          borderColor:'#f00',
          ticks: {
            max: 10,
            stepSize:0.5,
            fontColor:'#00cd00',
            min: 0
          },
          gridLines: {
            display: false,
          }
        },
        {
          id: 'Bend',
          type: 'linear',
          position: 'left',
          ticks: {
            max:15,
            stepSize:2,
            fontColor:'#ff3030',
            min: -10
          },
          gridLines: {
            display: false,
          }
        }
      ]
      },
      legend: {
        display: true,
        position:'top',
        fullWidth:true,
        labels:
        {
          fontSize: 18,
          fontColor:'#797a7b',
          fontFamily:'Arial',
          boxWidth:9,
          usePointStyle: true,
          padding:40
        },
      }
     },
     chartData : [
      {
        data: [0,0,0,0,0,0,0,0],
        label: 'Rotation',
        backgroundColor: [
          'transparent'
        ],
        yAxisID: 'Rotation',
        pointRadius: 0,
        pointHoverRadius: 0,
        borderColor: [
          'rgba(0, 0, 254,1)'
      ],
      pointBackgroundColor: [
          'rgba(0, 0, 254,1)'
      ],
       
        borderWidth: 0,
      },
      {
        data: [0,0,0,0,0,0,0,0],
        label: 'Extention',
        yAxisID: 'Extention',
        backgroundColor: [
          'transparent'
        ],
        pointRadius: 0,
        pointHoverRadius: 0,
        borderColor: [
            'rgba(0, 205, 0,1)'
        ],
        pointBackgroundColor: [
          'rgba(0, 205, 0,1)'
        ],
        borderWidth: 0,
      },
      {
        data: [0,0,0,0,0,0,0,0],
        label: 'Bend',
        yAxisID: 'Bend',
        backgroundColor: [
            'transparent',
        ],
        pointRadius: 0,
        pointHoverRadius: 0,
        borderColor: [
          'rgba(231, 0, 18,1)'
        ],
        pointBackgroundColor: [
          'rgba(231, 0, 18,1)'
        ],
        borderWidth: 0,
      },
     
    ],
    chartlegend:true,
    chartType: 'line',
    chartLabels: [],
  }