vue-google-图表如何改变颜色时，过滤器点击选择?

Question

当我点击堆栈列时，我已经创建了带有过滤器的堆栈列图。

,但当我点击选中,color改变默认color(蓝色)

Here my vue app

https://codesandbox.io/s/vue-dashboard-chart-6lvx4?file=/src/components/Dashboard.vue

我希望颜色选择相同的颜色在堆栈列。

如何使用Vue-google-charts?

谢谢你，Dede

Answer 1

您可以看到这个codesandbox，这正是您想要的。首先为chartOptions中的每个系列添加颜色:

series: {
0: { color: "#3366cc" },
1: { color: "#dc3912" },
2: { color: "#ff9900" },
3: { color: "#109618" },
4: { color: "#990099" },
5: { color: "#0099c6" },
6: { color: "#333" },
},

此外，您应该定义另一个对象来存储data属性中的默认颜色:

defaultColors: {
0: { color: "#3366cc" },
1: { color: "#dc3912" },
2: { color: "#ff9900" },
3: { color: "#109618" },
4: { color: "#990099" },
5: { color: "#0099c6" },
6: { color: "#333" },
},

当你过滤数据时，你可以改变第一个系列的颜色:

this.chartOptions.series[0].color = this.defaultColors[idx].color;

Answer 2

更新@Nima Ebrazeh答案(解决了小错误并显示图表标题):

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>