时间戳

首页 > 解决方案 > 在 vuejs 中单击按钮时显示/隐藏动态数据

javascript - 在 vuejs 中单击按钮时显示/隐藏动态数据

问题描述

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

<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。那么应该如何在每个按钮单击时显示不同的图表。如果有人需要更多信息，请告诉我。任何帮助将不胜感激。谢谢！

标签： javascriptvuejs2

解决方案

如果您更改数据集，vue-chartjs 不会提供实时更新。但是，vue-chartjs 提供了两个 mixin 来实现这一点。

  • 反应道具
  • 反应数据

因此，将 reactiveProp 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)
  }
}

推荐阅读