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

Question

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

我创建了堆积条形图，我想在图例中按标签添加过滤器。

这是我的Vue应用程序

https://codesandbox.io/embed/vue-dashboard-chart-6lvx4?fontsize=14&hidenavigation=1&theme=dark

使用 Vue-google-charts 包装器是如何完成的？

谢谢你最好的问候，德德

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>