Vue-google-chart如何添加过滤器类别

Question

如何在Vue.js中使用vue-google-charts包装器在条形图中创建过滤器类别。

我已经创建了堆叠条形图，我想在图例中通过标签添加过滤器。

这里是我的vue应用程序

https://codesandbox.io/embed/vue-dashboard-chart-6lvx4?fontsize=14& hidenavigation = 1,黑暗主题=

如何使用Vue-google-charts包装器?

谢谢你，Dede

Answer 1

您可以使用chartEvents过滤图表数据:

Vue.component("gchart", VueGoogleCharts.GChart);
new Vue({
el: '#demo',
data() {
return {
chartData: [
['Month', 'New', 'Verified', 'Regitered ID', 'On Playing', 'Finished', 'Active', 'Inactive'],
['January', 7, 4, 18, 15, 9, 10, 0],
['February', 16, 22, 23, 30, 16, 9, 8],
['March', 10, 2, 20, 13, 14, 21, 18]
],
chartOptions: {
chart: {
title: "Player Performance"
},
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
},
chartEvents: {
'click': (e) => {
const numberPattern = /d+/g;
const idx = Number(e.targetID.match(numberPattern)[0])
this.isFiltered ? this.allData() : this.filterChart(idx)
}
},
newData: [],
isFiltered: false
};
},
methods: {
filterChart(idx) {
this.allData()
for(let i = 0; i < this.newData.length; i++) {
this.newData[i] = [this.newData[i][0], this.newData[i][idx + 1]]
}
this.isFiltered = true
},
allData() {
this.newData = [...this.chartData]
this.isFiltered = false
},
},
mounted(){
this.allData()
}
})
Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-google-charts@0.3.2/dist/vue-google-charts.browser.js"></script>
<div id="demo">
<div id="app">
<GChart type="ColumnChart" :data="newData" :options="chartOptions" :events="chartEvents" />
</div>
</div>