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

jmp7cifd 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(209)

我正在做泡泡排序的可视化算法，想用线图来展示做空的过程。
我已尝试实现computed属性，但浏览器挂起。

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

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

chart.js

来源：https://stackoverflow.com/questions/53978658/how-to-make-dynamic-chart-using-vue-component-with-chart-js

1条答案

按热度按时间

wz3gfoph1#

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

每次a更改时都会重新计算计算属性，并且您正在更改计算属性本身中的a的值;这可能是导致浏览器挂起的原因。
在执行computed property函数和更新视图之间没有明显的延迟，因此用户不会看到任何动画。

由于您没有在模板中直接使用a，并且computed属性只有一个依赖项a，因此不需要删除computed属性。
相反，创建一个函数来完成冒泡排序算法的一次传递，并在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的React性系统在通过索引访问阵列时不会注意到阵列的变化，因此必须使用$set。请参见https://v2.vuejs.org/v2/guide/list.html#Caveats。
在这种情况下，条形图比折线图更美观。
a是一个很难描述变量名，请尝试给予它一个更有意义且唯一的名称。
在描述bug时，要比“浏览器挂起”更准确。浏览器窗口是否只是冻结（即不能与页面交互）？发生这种情况需要多长时间？控制台是否有错误？等等。
您的问题中有一处打字错误：不要这么懒。如果你不给予你的问题，没有人会在乎回答它。

赞(0）回复(0）举报 2022-11-06

我来回答

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

1条答案

相关问题

热门标签

最新问答