C3 js动态绑定

Question

我正在使用C3.js在我的angular应用程序中呈现仪表图。网页上有多个图表，它们的顺序和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");
};

因为bindto不能将图表绑定到id元素，所以每个图表的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')

Answer 3

<div class="chart0"></div>
<div class="chart1"></div>
<div class="chart2"></div>
<div class="chart3"></div>
<div class="chart4"></div>
<div class="chart5"></div>
<div class="chart6"></div>
<div class="chart7"></div>
<div class="chart8"></div>
<div class="chart9"></div>
<div id="chart"></div>
$('#chart').attr("id", "chart" + i);
$(".chart" + i).attr("id", "chart");

如果在循环内使用。同样的方法也可以在循环之外使用，只需根据上面的要求更改I，就可以生成10个图表。它是经过测试的