Question

我想在每次单击按钮时动态显示和隐藏折线图，但是当我单击任何按钮时，数据没有改变。每当我看到相同的数据时。这是我的代码：

<template>
   <div> 
      <v-btn color="primary" mr-2 @click="changeTab('week')">Week</v-btn>
      <v-btn color="error" mr-2  @click="changeTab('month')">Month</v-btn>
      <v-btn color="info" mr-2  @click="changeTab('year')">Year</v-btn>
      <div v-if="selectedChartData !=null">
         <line-chart
            :width="650"
            :height="400"
            :dataSet= "selectedChartData.ChartData"
            :labels= "selectedChartData.ChartLabel"
            :chartColorsData="selectedChartData.ChartColors"
            :label="selectedChartData.ChartData"
            >
         </line-chart>
      </div>

   </div>

</template>

<script>
import LineChart from "Components/Charts/LineChart";
import { buySellChartData } from 'Assets/data/buySellChartData.js'

export default {
   components:{
      LineChart,
   },
  data() {
    return {
       buySellChartData,
       selectedButton: 'week',
       selectedChartData: null,
    };
  },
  mounted(){
    this.selectedChart(this.selectedButton);
  },
  methods:{
    selectedChart(selectedButton){
      for(var i=0; i< this.buySellChartData.length; i++){
        if(this.buySellChartData[i].tag == selectedButton) {
          this.selectedChartData = this.buySellChartData[i];
          break;
        }
      }
    },
    changeTab(selectedBtn){
      this.selectedButton = selectedBtn;
      this.selectedChart(this.selectedButton);
    }
  }
};
</script>

在单击按钮时，我将选定的数据分配给变量“ selectedChartData ”，然后传递给折线图组件。在中，“ this.buySellChartData [i] .tag” 标签的值为“年，周或月”。这是折线图代码：

import { Line } from 'vue-chartjs'

const lineTension = 0.1;
const borderWidth = 3;
const pointRadius = 2;
const pointBorderWidth = 2;


export default {
    extends: Line,
    props: {
      dataSet: {
            type: Array
        },
        label: {
            type: Array,
        },
        labels: {
            type: Array
      },
      chartColorsData:{
         type: Array
      },
    },
    data() {
        return {
            options: {
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: true,
                            drawBorder: true
                        },
                        ticks: {
                            stepSize: 20,
                     // padding: 5
                     display:true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                     // padding: 10
                     display:true
                        }
                    }]
                },
                legend: {
                    display: false
                },
                responsive: true,
                maintainAspectRatio: false
            }
        }
    },
    mounted() {
        this.renderChart({
         labels: this.labels,
            datasets: [
                {
                    label: (this.label[0]).label,
                    lineTension,
                    borderColor: this.chartColorsData[0].borderColor,
                    pointBorderColor: this.chartColorsData[0].borderColor,
                    pointBorderWidth,
               pointRadius,
                    fill: false,
                    pointBackgroundColor: '#FFF',
                    borderWidth,
                    data: this.dataSet[0].data
            },
            {
                    label: this.label[1].label,
                    lineTension,
                    borderColor: this.chartColorsData[1].borderColor,
                    pointBorderColor: this.chartColorsData[1].borderColor,
                    pointBorderWidth,
               pointRadius,
                    fill: false,
                    pointBackgroundColor: '#FFF',
                    borderWidth,
                    data: this.dataSet[1].data
            },
            {
                    label: this.label[2].label,
                    lineTension,
                    borderColor: this.chartColorsData[2].borderColor,
                    pointBorderColor: this.chartColorsData[2].borderColor,
                    pointBorderWidth,
               pointRadius,
                    fill: false,
                    pointBackgroundColor: '#FFF',
                    borderWidth,
                    data: this.dataSet[2].data
                },

            ]
        }, this.options)
    }
}

请打开链接，以查看我正在创建哪种图表的屏幕快照https://www.awesomescreenshot.com/image/4110976/35de049e785364eec1006c23301dcf2f。因此，如何在每次单击按钮时显示不同的图表。如果有人需要更多信息，请告诉我。任何帮助将不胜感激。谢谢！

Answer 1

如果更改数据集，

vue-chartjs不会提供实时更新。但是，vue-chartjs提供了两个mixins来实现此目的。

reactiveProp
reactiveData

因此向您添加reactProp mixin，以便在数据集更改或更新时实时更新图表

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

在vue.js中单击按钮显示/隐藏动态数据

1 个答案: