如何使dc.js图表响应 [英] How to make the dc.js charts responsive
问题描述
有没有办法让 dc.js 图表回应？
Is there a any way to make the dc.js charts responsive?
很多让图表适合桌面大小。
I'm struggling a lot to make the charts fit the desktop size.
我使用Twitter Bootstrap 3.我将div的宽度存储到一个变量，并将其传递给图表宽度。这不会使图表响应。但是在第一次加载时，图表会根据屏幕的大小变为宽度。
I'm using Twitter Bootstrap 3. I store the width of the div to a variable and pass it to the chart width. This will not make the chart responsive. But on first load the charts get to the width according to the size of the screen.
但现在我面临一个挑战，我有一个不同的文件 dc.js 图表。
But now I face a challenge in it, that I have a different file for the dc.js chart.
我通过 iframe 。
当我通过 iframe 调用它时，所有div的宽度为0，
When I call it through iframe the width is 0 for all the divs, and no charts appear in the webpage.
但是当我重新加载 iframe 时，会显示图表。
But when I reload the iframe alone, the charts are appearing.
我甚至试图加载框架，当我们点击那个特定的导航项目。
I even tried to load the frame when we click on that particular navigation item. But even that didn't work for me.
推荐答案
有人帮我解决这个问题。方案
我已经设置了一个plunker与一个dc.js演示，我调整大小时重新翻译，并获得容器元素的宽度来确定大小。它嵌入在iframe中并按原样工作。我建议玩这个plunker适合你的CSS，因为我只是做最简单的可能的iframe设置。我想象你做了类似的事情，所以我不知道你错了，希望这有助于。
I've set up a plunker with a dc.js demo that I have rerendering when resized, and getting the width of the container element to determine the size. This is embedded in an iframe and working as-is. I suggest playing with this plunker to fit your css, as I'm just making the simplest possible iframe setup. I'm imagining you did something similar to this, so I"m not exactly sure where you went wrong. Hopefully this helps.
<body>
<h1>Test</h1>
<iframe src="iframe.html" class="iframe"></iframe>
</body>
以及用于加载图表的容器和脚本的iframe：
And an iframe with containers and scripts to load the chart:
<body> <h2>inside iframe</h2>
<div id="box-test"></div>
<div id="pie-chart"></div>
<script src="script.js" type="text/javascript"></script>
</body>
调用获得所需的宽度< h3>
A call to get the width you need
var width = document.getElementById('box-test').offsetWidth;
使用该宽度进行初始渲染
Using that width for the initial render
chart
.width(width)
.height(480)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.dimension(experimentDimension)
.group(speedArrayGroup)
.elasticY(true)
.elasticX(true);
最后一个函数来处理窗口调整大小
And finally a function to handle what to do on window resize
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);
};
这篇关于如何使dc.js图表响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
