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

Vue-chartjs绘制多个折线图

1 个答案: