C3 js动态绑定

Question

我正在使用C3.js在我的角度应用程序中渲染一个仪表图表。网页上有多个图表，它们的顺序和ID在运行时确定。

我有一个名为WidgetService的服务，它可以呈现不同类型的图表。我在setup的ng-init上调用了图形对象的div方法。

这是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 for 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')