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