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"]);

尽管它们似乎都没有更改标签。

这是它的代码笔： 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

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

的链接

Answer 3

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

更新标签，致电：

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

似乎在Vue中，您仍然需要“回退” ApexCharts的原始JS方法，而不是采用反应式方式进行中继。

我将拭目以待是否有评论支持我的操作方式，如果有，请将其标记为答案。

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

Apex甜甜圈图-无法获取标签进行更新

3 个答案: