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