如何使dc.js图表响应

Question

Is there a any way to make the dc.js charts responsive? 有没有办法让dc.js图表响应？

I'm struggling a lot to make the charts fit the desktop size. 我正在努力使图表适合桌面大小。

I'm using Twitter Bootstrap 3. I store the width of the div to a variable and pass it to the chart width. 我正在使用Twitter Bootstrap 3.我将div的宽度存储到变量并将其传递给图表宽度。 This will not make the chart responsive. 这不会使图表响应。 But on first load the charts get to the width according to the size of the screen. 但在首次加载时，图表会根据屏幕大小达到宽度。

But now I face a challenge in it, that I have a different file for the dc.js chart. 但现在我面临一个挑战，我有一个不同的dc.js图表文件。

And I'm calling through a iframe . 我正在通过iframe打电话。

When I call it through iframe the width is 0 for all the divs, and no charts appear in the webpage. 当我通过iframe调用它时，所有div的宽度都是0，并且网页中没有图表。

But when I reload the iframe alone, the charts are appearing. 但是当我单独重新加载iframe时，图表就出现了。

I even tried to load the frame when we click on that particular navigation item. 当我们点击该特定导航项时，我甚至尝试加载框架。 But even that didn't work for me. 但即使这样对我也不起作用。

Someone help me to overcome this issue. 有人帮我克服了这个问题。

Answer 1

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. 我已经设置了一个带有dc.js演示的plunker，我在调整大小时重新渲染，并获取容器元素的宽度来确定大小。 This is embedded in an iframe and working as-is. 这是嵌入在iframe中并按原样工作。 I suggest playing with this plunker to fit your css, as I'm just making the simplest possible iframe setup. 我建议使用这个plunker来适应你的css，因为我只是做了最简单的iframe设置。 I'm imagining you did something similar to this, so I"m not exactly sure where you went wrong. Hopefully this helps. 我想你做了类似的事情，所以我不确定你哪里出错了。希望这会有所帮助。

responsive DC chart in an iframe iframe中的响应式DC图表

Given a standard page with an iframe: 给定带有iframe的标准页面：

 <body> <h1>Test</h1> <iframe src="iframe.html" class="iframe"></iframe> </body>

And an iframe with containers and scripts to load the chart: 还有一个带有容器和脚本的iframe来加载图表：

 <body> <h2>inside iframe</h2> <div id="box-test"></div> <div id="pie-chart"></div> <script src="script.js" type="text/javascript"></script> </body>

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);
};

Answer 2

When you pass null when calling .width() and .height() methods (or not calling them at all) on the dc.js Chart instance, it will use width and height of the anchor element (which can then be styled with some evergreen responsive css classes either from bootstrap or some other responsive css framework ;)). 当您在dc.js图表实例上调用.width()和.height()方法（或根本不调用它们.width()时传递null ，它将使用锚元素的宽度和高度（然后可以使用某些样式进行样式设置）来自bootstrap或其他一些响应式css框架的常青响应css类;））。

For more info see: https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#dc.baseMixin+height 有关详细信息，请参阅： https ： //github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#dc.baseMixin+height

如何使dc.js图表响应

问题描述

2 个解决方案

解决方案1
19 2014-07-31 16:10:50

Given a standard page with an iframe: 给定带有iframe的标准页面：

And an iframe with containers and scripts to load the chart: 还有一个带有容器和脚本的iframe来加载图表：

A call to get the width you need 调用以获得所需的宽度

Using that width for the initial render 使用该宽度进行初始渲染

And finally a function to handle what to do on window resize 最后一个函数来处理窗口调整大小的操作

解决方案2
0 2018-05-16 12:48:41

如何使dc.js图表​​响应

问题描述

2 个解决方案

解决方案1 19 2014-07-31 16:10:50

Given a standard page with an iframe: 给定带有iframe的标准页面：

And an iframe with containers and scripts to load the chart: 还有一个带有容器和脚本的iframe来加载图表：

A call to get the width you need 调用以获得所需的宽度

Using that width for the initial render 使用该宽度进行初始渲染

And finally a function to handle what to do on window resize 最后一个函数来处理窗口调整大小的操作

解决方案2 0 2018-05-16 12:48:41

如何使dc.js图表响应

解决方案1
19 2014-07-31 16:10:50

解决方案2
0 2018-05-16 12:48:41