He creado un gráfico de columnas de pila con filtro cuando hago clic en la columna de pila.
Pero cuando hago clic en seleccionado, el color cambia al color predeterminado (azul)
Aquí mi aplicación vue
https://codesandbox.io/s/vue-dashboard-chart-6lvx4?file=/src/components/Dashboard.vue
Esperaba que el color se seleccionara igual que el color en la columna de la pila.
¿Cómo se hace usando Vue-google-charts?
Gracias un saludo, Dede
Puedes ver este codesandbox que es exactamente lo que quieres. Primero agregue color para cada serie en chartOptions :
series: { 0: { color: "#3366cc" }, 1: { color: "#dc3912" }, 2: { color: "#ff9900" }, 3: { color: "#109618" }, 4: { color: "#990099" }, 5: { color: "#0099c6" }, 6: { color: "#333" }, }, Además, debe definir otro objeto para almacenar los colores predeterminados en la propiedad de data :
defaultColors: { 0: { color: "#3366cc" }, 1: { color: "#dc3912" }, 2: { color: "#ff9900" }, 3: { color: "#109618" }, 4: { color: "#990099" }, 5: { color: "#0099c6" }, 6: { color: "#333" }, },Luego, cuando filtre los datos, puede cambiar el color de la primera serie:
this.chartOptions.series[0].color = this.defaultColors[idx].color;Se actualizó la respuesta de @Nima Ebrazeh (se resolvió un pequeño error y se muestra el título del gráfico):
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: "bottom", maxLines: 5 }, bar: { groupWidth: "75%" }, isStacked: true, title: "Player Performance (please chose category to filter)", series: { 0: { color: "#3366cc" }, 1: { color: "#dc3912" }, 2: { color: "#ff9900" }, 3: { color: "#109618" }, 4: { color: "#990099" }, 5: { color: "#0099c6" }, 6: { color: "#333" }, }, }, chartEvents: { click: (e) => { let idx = e.targetID.match(/\d+/g); if (idx && idx.length < 3) { idx = Number(idx[0]) this.isFiltered ? this.allData() : this.filterChart(idx); } }, }, newData: [], isFiltered: false, defaultColors: { 0: { color: "#3366cc" }, 1: { color: "#dc3912" }, 2: { color: "#ff9900" }, 3: { color: "#109618" }, 4: { color: "#990099" }, 5: { color: "#0099c6" }, 6: { color: "#333" }, }, }; }, 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.chartOptions.series[0].color = this.defaultColors[idx].color; this.isFiltered = true; }, allData() { this.newData = [...this.chartData]; this.chartOptions.series[0].color = this.defaultColors[0].color; 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>