Apex 圆环图 - 无法更新标签

Question

我正在尝试让 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"]);

None 他们似乎正在更改标签。

这是它的代码笔： 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 饼图/圆环图如何工作的一些理解，但我似乎也无法在文档中找到它。

Answer 1

有关如何更新图表的文档在此处：https://github.com/apexcharts/vue-apexcharts

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

  this.chartOptions = {
     labels: ["d", "e", "f"]
  };

Answer 2

经过反复试验（因为我找不到以 Vue 风格正确执行此操作的正确方法），这是我更新标签的方法：

正在更新标签，调用：

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

看来在 Vue 中，你仍然需要 "fallback" 到 ApexCharts 的普通 JS 方法，而不是依赖于反应方式。

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

有意思的是series好像是直接更新数组来更新的，labels却没有。

Answer 3

更新 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>

这里是link到codesandbox

Apex 圆环图 - 无法更新标签

Apex donut chart - cant get labels to update

vue.js

apexcharts