Апекс круговая диаграмма - не могу получить ярлыки для обновления

Апекс круговая диаграмма - не могу получить ярлыки для обновления

21.12.2019 05:47:27 Просмотров 33 Источник

Я пытаюсь получить графики Apex (in 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 pie / donut, но я не могу найти это в документации.

У вопроса есть решение - Посмотреть?

Ответы - Апекс круговая диаграмма - не могу получить ярлыки для обновления / Apex donut chart - cant get labels to update

dreijntjens

24.12.2019 12:55:41

Документация по обновлению вашей диаграммы находится здесь: https://github.com/apexcharts/vue-apexcharts

Для обновления меток вы должны добавить это в свой метод:

  this.chartOptions = {
     labels: ["d", "e", "f"]
  };
https://stackoverflow.com/questions/59433135/apex-donut-chart-cant-get-labels-to-update/59461680#comment105128192_59461680
К сожалению, это (и любые "реактивные" варианты, которые я мог придумать), похоже, не сработало. Смотрите мой ответ о том, как мне удалось заставить его работать.
Pavel Donchev

25.12.2019 06:34:21

После некоторых проб и ошибок (так как я не мог найти правильный способ правильно сделать это в стиле Vue), вот как я смог обновить этикетки:

Обновление меток, вызов:

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

Похоже, что в Vue вам все еще нужно "откатиться" к методам vanilla JS ApexCharts, вместо того чтобы ретранслировать на реактивный путь.

Я подожду, чтобы увидеть, есть ли комментарии, которые поддерживают мой способ сделать это, и отмечу это как ответ, если да.

Интересно то, что ряд, кажется, обновляется путем прямого обновления массива, но метки этого не делают.

Является ответом!
junedchhipa

25.12.2019 05:05:53

Обновление 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

https://stackoverflow.com/questions/59433135/apex-donut-chart-cant-get-labels-to-update/59479153#comment105144180_59479153
Я обновил песочницу, чтобы продемонстрировать эту серию + updating, поскольку это то, что мне нужно. Похоже, ваш подход лучше. codesandbox.Ио/с/…
https://stackoverflow.com/questions/59433135/apex-donut-chart-cant-get-labels-to-update/59479153#comment105144526_59479153
Если вы обновляете как серии, так и этикетки, я обновил ответ, чтобы проиллюстрировать более эффективный способ. В противном случае обновление рядов в chartOptions вызовет 2 рендеринга.
Закрыть X