Как сделать динамический график с использованием компонента Vue с chart-js - PullRequest
Новая
       36

Как сделать динамический график с использованием компонента Vue с chart-js

0 голосов
/ 30 декабря 2018

Я делаю алгоритм визуализации Bubble sort и хотел показать процесс закорочения с помощью линейного графика.

Я пытался реализовать вычисляемое свойство, но браузер зависает. 

<template>
  <div class="hello">
    <h1>Bubble Sort</h1>
    <p>{{ bubbleSort()}}</p>
    <line-chart :data="bubbleSort()"></line-chart>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      a : [12, 0, 4, 546, 122, 84, 98, 64, 9, 1, 3223, 455, 23, 234, 213] 
    }
  },
  methods : {
    bubbleSort: function () {
      let swapped;
      do {
        swapped = false;
        for(var i = 0; i < this.a.length; i++){
          if(this.a[i] > this.a[i+1]){
            let temp = this.a[i];
            this.a[i] = this.a[i+1];
            this.a[i+1] = temp;
            swapped = true;
          }
        }
      }while(swapped);
      return Object.assign({},this.a);
    }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

Я ожидаю, что диаграмма обновится во время короткого замыкания.

1 Ответ

0 голосов
/ 31 декабря 2018

Использование вычисляемого свойства не лучший способ реализовать визуализацию с пузырьковой сортировкой по двум причинам:

  • Вычисляемое свойство пересчитывается каждый раз, когда изменяется a, и вы меняетезначение a в самом вычисляемом свойстве;это, вероятно, вызывает зависание браузера.
  • Нет заметной задержки между выполнением функции вычисляемого свойства и обновлением представления, поэтому пользователь не увидит никакой анимации.

Поскольку вы не используете a непосредственно в шаблоне, а вычисляемое свойство имеет только одну зависимость, a, избавьтесь от вычисляемого свойства, в этом нет необходимости.

Вместо этого создайте функцию, котораязавершает один проход алгоритма пузырьковой сортировки и вызывает эту функцию в setInterval, отменяя цикл, когда проход выполняется с 0 перестановками: 

export default {
  name: 'HelloWorld',
  data() {
    return {
      a : [12, 0, 4, 546, 122, 84, 98, 64, 9, 1, 3223, 455, 23, 234, 213],
      intervalId: null,
    }
  },
  methods: {
    bubbleSort() {
      let swapped = false;

      for (let i = 0; i < this.a.length - 1; i++) {
        if (this.a[i] > this.a[i+1]) {
          const temp = this.a[i];
          this.$set(this.a, i, this.a[i+1]);
          this.$set(this.a, i+1, temp);
          swapped = true;
        }
      }

      if (!swapped) {
        clearInterval(this.intervalId);
      }
    },
  },
  mounted() {
    this.intervalId = setInterval(() => {
      this.bubbleSort();
    }, 2000);
  }
};

Примечания:

  • Система реактивности Vue не заметит изменений в массивах при доступе к ним через индекс, поэтому вместо этого необходимо использовать $set.См. https://vuejs.org/v2/guide/list.html#Caveats.
  • В этом случае гистограмма будет выглядеть лучше, чем линейный график.
  • a - это очень неописуемое имя переменной, попробуйте дать ему более осмысленное и уникальное имя.
  • Будьте точнее, чем "зависание браузера" при описании ошибки.Окно браузера просто зависает (т.е. не может взаимодействовать со страницей)?Как долго это происходит?Есть ли ошибки в консоли?И т.д.
  • В вашем вопросе есть опечатка: swapp.Не будь таким ленивым.Если вы не наплеваете на свой вопрос, никто не посмеет ответить на него.
...