Unk*_*ser 17 javascript d3.js dc.js
有没有办法使dc.js图表响应？
我正在努力使图表适合桌面大小.
我正在使用Twitter Bootstrap 3.我将div的宽度存储到变量并将其传递给图表宽度.这不会使图表响应.但在首次加载时,图表会根据屏幕大小达到宽度.
但现在我面临一个挑战,我有一个不同的dc.js图表文件.
而我正打电话给iframe.
当我通过iframe宽度调用它时所有div都为0,并且网页中不显示任何图表.
但是当我iframe单独重装时,图表就出现了.
当我们点击该特定导航项时,我甚至尝试加载框架.但即使这样对我也不起作用.
有人帮我克服了这个问题.
小智 19
我已经设置了一个带有dc.js演示的plunker,我在调整大小时重新渲染,并获取容器元素的宽度来确定大小.它嵌入在iframe中并按原样工作.我建议使用这个plunker来适应你的css,因为我只是做了最简单的iframe设置.我想你做了类似的事情,所以我不确定你哪里出错了.希望这会有所帮助.
Run Code Online (Sandbox Code Playgroud)<body> <h1>Test</h1> <iframe src="iframe.html" class="iframe"></iframe> </body>
Run Code Online (Sandbox Code Playgroud)<body> <h2>inside iframe</h2> <div id="box-test"></div> <div id="pie-chart"></div> <script src="script.js" type="text/javascript"></script> </body>
var width = document.getElementById('box-test').offsetWidth;
chart
.width(width)
.height(480)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.dimension(experimentDimension)
.group(speedArrayGroup)
.elasticY(true)
.elasticX(true);
window.onresize = function(event) {
var newWidth = document.getElementById('box-test').offsetWidth;
chart.width(newWidth)
.transitionDuration(0);
pie.transitionDuration(0);
dc.renderAll();
chart.transitionDuration(750);
pie.transitionDuration(750);
};
| 归档时间： |
|
| 查看次数： |
7834 次 |
| 最近记录： |