Vue-chartjs繪製多條直線圖

Question

HI我正在嘗試繪製折線圖。 我在表單中設置了數據

{ 
    line_1:{ 
     rt:[1,2,3,4,5,6], 
     int:[2,3,4,5,6,7] 
    }, 
    line_2:{ 
     rt:[1,2,3,4,5,6], 
     int:[2,3,4,5,6,7] 
    } 
} 

我試過了。

showChart(){ 
       this.renderChart({ 
        labels: this.data.line_1.rt, 
        datasets: [ 
         { 
          label: 'Data One', 
          backgroundColor: '#f87979', 
          data: his.data.line_1.intensity, 
         } 
        ] 
       }, {responsive: true, maintainAspectRatio: false}) 
      } 

現在1我想「RT」是在x軸和每行的intesity陣列是不同的。我可以繪製一條線，但無法繪製多條線。

這裏是我的圖表組件看起來像

<script> 
    let VueChartJs = require('vue-chartjs'); 

    export default VueChartJs.Line.extend({ 
     props:['data', 'status'], 

     watch: { 
      // whenever question changes, this function will run 
      status: function (newStatus) { 
       if(newStatus === true){ 
        this.showChart(); 
       } 
      } 
     }, 

     methods :{ 
      showChart(){ 
       console.log(this.data); 
       this.renderChart({ 
        labels: this.data.groups[0]['peaks'][0].eic.rt, 
        datasets: [ 
         { 
          label: 'Data One', 
          backgroundColor: '#f87979', 
          data: this.data.groups[0]['peaks'][0].eic.intensity 
         } 
        ] 
       }, {responsive: true, maintainAspectRatio: false}) 
      } 
     }, 

     mounted() { 



     } 
    }) 
</script> 

Answer 1

多行，必須添加多個數據集;）

datasets: [ 
    { 
    label: 'Line One', 
    backgroundColor: '#f87979', 
    data: this.data.groups[0]['peaks'][0].eic.intensity 
    }, 
    { 
    label: 'Line two', 
    backgroundColor: '#f87979', 
    data: this.data.groups[0]['peaks'][0].eic.intensity 
    } 
]