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

Now 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 
    } 
]