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

Question

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

但是当我单击选中时，颜色会更改为默认颜色（蓝色）

这是我的Vue应用程序

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

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

它是如何使用 Vue-google-charts 完成的？

谢谢你最好的问候，德德

Answer 1

您可以看到这个代码框，这正是您想要的。首先为每个系列添加颜色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>