c3.js 使用 vue.js 加载远程数据时图表不更新

Question

目前我有一个使用 vue 和 c3 的组件。 c3 图表立即呈现，但我仍在通过 ajax 获取数据。如何延迟组件的渲染？或者一旦数据被获取然后显示图表。

我的代码非常简单。

<my-chart :chartdata="chart.data"></my-chart> etc.

注意：如果我输入静态数据 - 它会完美呈现。

JSFIDDLE https://jsfiddle.net/1o4kqjwd/3/

Answer 1

首先，将 v-if 指令添加到 <my-chart> 标记，以便仅在加载数据（mydata，在您的 fiddle 中）时呈现它：

<my-chart :chartdata="mydata" v-if="mydata"></my-chart>

其次，在 my-chart 的组件定义中，您需要向 mydata 添加一个 watcher 以调用渲染方法（drawChart()，在您的 fiddle 中）每当 mydata 发生变化时：

watch: {
  mydata() {
    this.drawChart();
  }
},

最后，您可以将 ajax 调用放在父 Vue 定义的自己的方法中。这样，您可以在 mounted() 生命周期挂钩中调用它，然后从该实例范围内的任何地方调用它：

methods: {
  fetchData() {
    var self = this;  

    this.$http.get('yoururl').then(function(response) {
      let chartData = response.data;

      // do any formatting to chartData here

      self.data = chartData;
    })
  }
}

c3.js 使用 vue.js 加载远程数据时图表不更新

c3.js chart doesn't update when loading remote data using vue.js

d3.js

vue.js

c3.js