如何使用带有 chart-js 的 Vue 组件制作动态图表

Question

我正在制作冒泡排序可视化算法，想用折线图展示做空的过程。

我已经尝试实现计算属性但浏览器挂起。

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

我希望图表在做空时更新。

Answer 1

使用计算属性并不是实现冒泡排序可视化的最佳方式，原因有二：

每次 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是一个很不起眼的变量名，尽量给它一个更有意义和独特的名字。
在描述错误时比 "browser hangs" 更准确。浏览器 window 是否只是冻结（即无法与页面交互）？这需要多长时间才能发生？控制台中是否有错误？等等
您的问题有错别字：swapp。别那么懒惰。如果你不在乎你的问题，就没有人会在乎回答它。

如何使用带有 chart-js 的 Vue 组件制作动态图表

How to make dynamic chart using Vue component with chart-js

chartkick

chart.js

vuejs2