C3 js dynamic bindto

Question

각도 응용 프로그램에서 게이지 차트를 렌더링하는 데 C3.js을 사용하고 있습니다. 웹 페이지에는 여러 개의 차트가 있으며 런타임에 해당 순서와 ID가 결정됩니다.

다른 유형의 차트를 렌더링하는 WidgetService이라는 서비스가 있습니다. 나는 div의 ng-init에있는 그래프 개체의 setup 메서드를 호출합니다.

여기에 setup 방법이다 :

this.setup = function() { 
    var chart = c3.generate({ 
    bindto: '#' + this.id, 
    data: { 
     columns: [ 
     ['data', this.data] 
     ], 
     type: 'gauge', 
    }, 
    size: { height: 180 } 
    }); 

    console.log("in setup"); 
}; 

각 차트의 id 런타임시 평가되고 있기 때문에 그 bindto의 HTML 요소 차트를 결합하는데 실패한다. id을 하드 코딩하면 제대로 작동합니다. 이 동적 바인딩을 달성 할 수있는 방법이 있습니까?

내 응용 프로그램의 구조와 비슷한 전체 예제를 살펴 보겠습니다. jsFiddle.

필자는 피들 (게이지)에 단 하나의 차트 만 포함 시켰지만 실제로는 다른 유형의 차트가 있습니다. 각 차트에는 자체 지시문 (예 : 게이지 차트의 경우 gauge-chart)과 WidgetService에서의 구현이 있습니다.

Answer 1

시도 :

bindto: document.getElementById(this.id) 

나를 위해 잘 작동합니다. 이들의

Answer 2

하나 일 것입니다 :

bindto: '#myContainer' 
// or element 
bindto: document.getElementById('myContainer') 
// or D3 selection object 
bindto: d3.select('#myContainer')