vue.js - Vue-chartjs 绘制多条折线图

Question

我正在尝试绘制折线图。我有表格中的数据集

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

现在我希望“rt”在 x 轴上，并且每条线的强度数组都不同。我可以画一条线，但不能画多条。

这是我的图表组件的样子：

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