将图表对象附加到html div

时间:2016-04-21 14:17:25

标签: javascript html angularjs html5 c3.js

我是C3 js的新手,并试图让这个原型工作。我有一个json文件,它有3个图表的图表规格。我想读取这个json对象,然后为每一行创建一个div,为它分配行中CHART_ID的ID,然后将图表附加到此div。图表元数据包含在每行的文件中,目标是动态生成带有元数据的图表。通过对fileData对象执行ng-repeat,我可以动态创建div。但是它永远不会在屏幕上呈现图表。你甚至可以在线上看到图表对象

var chart = eval(chartFunction);

如果你在那里放置一个断点,你会看到c3生成的图表对象,但当我尝试将其附加到图表的html元素时

var chartElement = angular.element(document.getElementById(chartId));     
chartElement.append(chart.element);  

这并没有显示任何内容。如果您尝试以下而不是ng-repeat,则可以将每个图表加载到其div

<div id="cht1"></div>
<div id="cht2"></div>
<div id="cht3"></div> 

但是我不想硬编码div元素,而是想创建与我的fileData对象中的行数一样多的div。  有人可以告诉我这里缺少什么以及如何正确地将相应的Div附加到其图表对象中,并使用ng-repeat进行循环。非常感谢您的帮助。请查看下面的plunker以查看示例

http://plnkr.co/edit/KCUslUxqBhYiOFZGx1gG?p=preview

0 个答案:

没有答案