vuejs2 - Vue-chartjs：在状态变化时重新加载图表

Question

我正在尝试使图表对状态更改做出反应，我在 sidenav 上有一些过滤器和一个包含如下 chart.js 组件的组件：

<tendance-chart slot="content" class="chart-wrapper" v-if="!loading" :labelsRepartitionTendance="labelsRepartitionTendance" :repartitionTendance="repartitionTendance"></tendance-chart>

效果很好，但是我想在过滤器更改时重新加载此图表，我该怎么做？

Answer 1

当您的过滤器在函数执行之前更改加载为 true 并在最后将加载更改为 false 时。然而，这不是一个好的做法，基本上你的图表应该监听它的数据并在每次更改时重新呈现自己。

Answer 2

vue-chartjs 附带了两个 mixin，reactiveDataMixin 和 reactivePropMixin。如果数据发生变化，它们将向 chartData 添加观察者并重新渲染更新图表。http://vue-chartjs.org/#/home?id=reactive-data

Answer 3

您必须使用 watch 并通过 setTimeout() 再次调用处理数据的函数。

 watch: {
        dataToObserve() {
            setTimeout(() => {
                this.functionThatHandlesData();
            }, 1000);
        }
    },