2

我正在尝试让 Apex 图表（在 Vue.js 中）也更新它们的标签。我使用以下示例作为基础：

https://apexcharts.com/vue-chart-demos/pie-charts/update-donut/

我做了一个非常基本的图表来演示这个问题。它在开始时有数据项和 3 个标签。更新按钮连接到更新事件。当您单击它时，数据会更改，但标签不会。两种都试过 - 直接设置：

this.chartOptions.labels = [] ...

并使用 vue 机制：

this.$set(this.chartOptions, "labels", ["d", "e", "f"]);

不过，他们似乎都没有改变标签。

这是它的代码笔： https ://codesandbox.io/s/vue-basic-example-z72rk?fontsize=14&hidenavigation=1&theme=dark

<template>
  <div class="example">
    <label>{{updated}}</label>
    <apexcharts width="300" height="300" type="donut" :options="chartOptions" :series="series"></apexcharts>
    <button v-on:click="changeChart">Update</button>
  </div>
</template>

    <script>
    import VueApexCharts from "vue-apexcharts";

    export default {
      name: "Chart",
      components: {
        apexcharts: VueApexCharts
      },
      data: function() {
        return {
          updated: "Not updated",
          chartOptions: {
            chart: {
              id: "basic-donut"
            },
            labels: ["a", "b", "c"]
          },
          series: [30, 40, 45]
        };
      },
      methods: {
        changeChart() {
          this.series = [1, 2, 3];
          this.chartOptions.labels = ["d", "e", "f"];
          this.$set(this.chartOptions, "labels", ["d", "e", "f"]);
          this.$set(this, "updated", "Updated");
        }
      }
    };
    </script>

我想我对 Apex 饼图/甜甜圈图的工作原理有一些了解，但我似乎也无法在文档中找到这一点。

4

3 回答 3

6

更新chartOptions应该会导致更新。

这是我刚刚测试的完整工作代码，它运行良好

<template>
  <div class="app">
    <button @click="updateLabels()">Update Labels</button>

    <apexcharts type="donut" width="280" :options="chartOptions" :series="series"/>
  </div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";

export default {
  name: "Chart",
  components: {
    apexcharts: VueApexCharts
  },
  data: function() {
    return {
      series: [44, 55, 41, 17, 15],
      chartOptions: {
        labels: ["a", "b", "c", "d", "e"]
      }
    };
  },
  methods: {
    updateLabels: function() {
      this.series= [Math.random() * 10, Math.random() * 10]
      this.chartOptions = {
        labels: [Math.random() * 10, Math.random() * 10],
      };
    }
  }
};
</script>

这是codesandbox的链接

于 2019-12-25T14:05:53.450 回答
2

关于如何更新图表的文档在这里：https ://github.com/apexcharts/vue-apexcharts

要更新标签，您必须将其添加到您的方法中：

  this.chartOptions = {
     labels: ["d", "e", "f"]
  };
于 2019-12-23T21:55:41.410 回答
1

经过一些试验和错误（因为我找不到正确的方法来以 Vue 风格正确地做到这一点），这是我能够更新标签的方法：

更新标签，请致电：

  ApexCharts.exec('chartId', "updateOptions", {
    labels: labels,
    series: series
  });

似乎在 Vue 中，您仍然需要“回退”到 ApexCharts 的香草 JS 方法，而不是在反应式方式上进行中继。

我会等着看是否有评论支持我的做法，如果有的话，将其标记为答案。

有趣的是，系列似乎是通过直接更新数组来更新的，而标签却没有。

于 2019-12-25T03:34:21.933 回答