在 vuejs 中单击按钮时显示/隐藏动态数据 [英] Show/hide dynamic data on button click in vuejs
问题描述
我想在每次单击按钮时动态显示和隐藏折线图，但是当我单击任何按钮时，数据不会改变.每次我都能看到相同的数据.这是我的代码:
<div><v-btn color="primary" mr-2 @click="changeTab('week')">周</v-btn><v-btn color="error" mr-2 @click="changeTab('month')">月</v-btn><v-btn color="info" mr-2 @click="changeTab('year')">年份</v-btn><div v-if="selectedChartData !=null"><折线图:width="650":height="400":dataSet="selectedChartData.ChartData":labels="selectedChartData.ChartLabel":chartColorsData="selectedChartData.ChartColors":label="selectedChartData.ChartData"></折线图></模板><脚本>从组件/图表/折线图"导入折线图；从资产/数据/buySellChartData.js"导入{buySellChartData}导出默认{成分:{折线图，},数据() {返回 {买入卖出图表数据，selectedButton: '周',selectedChartData:空，};},安装(){this.selectedChart(this.selectedButton);},方法:{selectedChart(selectedButton){for(var i=0; i 我在单击按钮时将所选数据分配给变量selectedChartData"并传递给折线图组件.在 "this.buySellChartData[i].tag" 中，标签的值是年、周或月".这是折线图代码: 请打开链接查看我正在创建什么样的图表的截图https:///www.awesomescreenshot.com/image/4110976/35de049e785364eec1006c23301dcf2f.那么如何在每次单击按钮时显示不同的图表.如果有人需要更多信息，请告诉我.任何帮助将不胜感激.谢谢！ 如果您更改数据集，vue-chartjs 不会提供实时更新.但是，vue-chartjs 提供了两个 mixin 来实现这一点. 因此向您添加reactiveProp mixin，以便在数据集更改或更新时实时更新图表 I want to dynamically show and hide the line chart on every button click, but when I click on any button, data is not changing. Every time same data is visible to me. Here is my code: where I am assigning selected data to a variable "selectedChartData" on a button click and passing to a line chart component. In "this.buySellChartData[i].tag" tag is having value "year,week or month".
Here is the line chart code: Please open the link to see the screenshot that what kind of chart I am creating https://www.awesomescreenshot.com/image/4110976/35de049e785364eec1006c23301dcf2f. So How it should be possible to show different chart on each button click. If someone needs more info, Please let me know. Any help will be appreciated. Thanks! vue-chartjs does not provide a live update if you change the datasets. However, vue-chartjs provides two mixins to achieve this. so add reactiveProp mixin to you compenent with make a live update of chart on dataset change or update
这篇关于在 vuejs 中单击按钮时显示/隐藏动态数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！import { Line } from 'vue-chartjs'常量线张力 = 0.1;常量边框宽度 = 3;const pointRadius = 2;const pointBorderWidth = 2;导出默认{延伸:线，道具: {数据集:{类型:数组},标签: {类型:数组，},标签: {类型:数组},图表颜色数据:{类型:数组},},数据() {返回 {选项: {尺度:{y轴:[{网格线: {显示:真实，drawBorder: 真},刻度:{步长:20，//填充:5显示:真}}],x轴:[{网格线: {显示:假，drawBorder: 假},刻度:{//填充:10显示:真}}]},传奇: {显示:假},响应:真实，保持纵横比:假}}},安装(){this.renderChart({标签:this.labels，数据集:[{标签: (this.label[0]).label,线张力，边框颜色:this.chartColorsData[0].borderColor，pointBorderColor: this.chartColorsData[0].borderColor,点边框宽度，点半径，填充:假，pointBackgroundColor: '#FFF',边框宽度，数据:this.dataSet[0].data},{标签:this.label[1].label,线张力，边框颜色:this.chartColorsData[1].borderColor，pointBorderColor: this.chartColorsData[1].borderColor,点边框宽度，点半径，填充:假，pointBackgroundColor: '#FFF',边框宽度，数据:this.dataSet[1].data},{标签:this.label[2].label,线张力，边框颜色:this.chartColorsData[2].borderColor，pointBorderColor: this.chartColorsData[2].borderColor,点边框宽度，点半径，填充:假，pointBackgroundColor: '#FFF',边框宽度，数据:this.dataSet[2].data},]}, this.options)}}import { Line, mixins } from 'vue-chartjs'const {reactiveProp } = mixins导出默认{延伸:线，混合:[reactiveProp]，道具:['选项']，挂载(){//this.chartData 是在 mixin 中创建的.//如果你想传递选项，请创建一个本地选项对象this.renderChart(this.chartData, this.options)}}<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>
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)
}
}
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)
}
}
