vue-google-chart 如何在单击过滤器时更改颜色?
vue-google-chart how to change colour when filter click selected?
当我点击堆叠柱时,我已经创建了带有过滤器的堆叠柱形图。
但是当我点击选中时,color
变为默认值 color
(蓝色)
这是我的 vue 应用程序
https://codesandbox.io/s/vue-dashboard-chart-6lvx4?file=/src/components/Dashboard.vue
我希望在堆栈列中选择相同的颜色。
如何使用 Vue-google-charts
完成?
谢谢你最诚挚的问候,Dede
你可以看到这个 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;
更新了@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>
当我点击堆叠柱时,我已经创建了带有过滤器的堆叠柱形图。
但是当我点击选中时,color
变为默认值 color
(蓝色)
这是我的 vue 应用程序
https://codesandbox.io/s/vue-dashboard-chart-6lvx4?file=/src/components/Dashboard.vue
我希望在堆栈列中选择相同的颜色。
如何使用 Vue-google-charts
完成?
谢谢你最诚挚的问候,Dede
你可以看到这个 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;
更新了@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>