Cómo crear una categoría de filtro en un gráfico de barras usando el contenedor vue-google-charts en Vue.js.
Creé un gráfico de barras apiladas y quiero agregar un filtro por etiqueta dentro de la leyenda.
Aquí mi aplicación vue
https://codesandbox.io/embed/vue-dashboard-chart-6lvx4?fontsize=14&hidenavigation=1&theme=dark
¿Cómo se hace usando el contenedor Vue-google-charts ?
Gracias un saludo, Dede
Puede filtrar datos de gráficos con 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>