vue-google-chart 如何在选择过滤器点击时更改颜色？答案

【问题标题】：vue-google-chart how to change colour when filter click selected?vue-google-chart 如何在选择过滤器点击时更改颜色？
【发布时间】：2021-10-10 09:49:18
【问题描述】：

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

但是当我点击选中时，颜色会变成默认颜色（蓝色）

这是我的 vue 应用

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

我预计颜色选择与堆栈列中的颜色相同。

如何使用 Vue-google-charts 完成？

谢谢你，德德

【问题讨论】：

标签： javascript vue.js charts gchart

【解决方案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;

【讨论】：

【解决方案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>

【讨论】：

是的，它的工作，谢谢@Nikola