vue.js를 사용하여 원격 데이터를로드 할 때 c3.js 차트가 업데이트되지 않습니다.

Question

현재 vue 및 c3을 사용하는 구성 요소가 있습니다. c3 차트는 즉시 렌더링되지만, 여전히 아약스를 통해 데이터를 가져옵니다. 구성 요소의 렌더링을 지연시키는 방법은 무엇입니까? 또는 일단 데이터를 가져 오면 차트가 표시됩니다.

내 코드가 꽤 복잡합니다.

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

참고 : 정적 데이터를 입력하면 완벽하게 렌더링됩니다.

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

Answer 1

첫째, 데이터 (mydata, 당신의 바이올린에)로드 될 때 렌더링 만에 <my-chart> 태그에 v-if 지시문을 추가 :

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

둘째,에 구성 요소 정의가 my-chart 인 경우 렌더링 메서드 (drawChart(), 피들)를 호출하려면 mydata에 워처를 추가해야합니다. mydata 명 변경 :

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

마지막으로, 당신은 부모 뷰 정의에 자신의 방법으로 AJAX 호출을 넣을 수 있습니다. 이 방법은, 당신은 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; 
    }) 
    } 
}