Question

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

我有一个名为WidgetService的服务，可以呈现不同类型的图表。我在setup的{{1}}上调用图表对象的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无法将图表绑定到html元素。如果我硬编码bindto它可以正常工作。有什么方法可以实现这种动态绑定吗？

这是完整示例的小提琴，类似于我的应用程序的结构：jsFiddle。

我在小提琴中仅包含一张图表（规格），但实际上有不同类型的图表。每个图表都有自己的指令（例如，id用于计量表）及其在gauge-chart中的实现。

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个图表。经过测试

C3 js动态绑定

3 个答案: