如何使dc.js图表响应

Question

有没有办法让dc.js图表响应？

我正在努力使图表适合桌面大小。

我正在使用Twitter Bootstrap 3.我将div的宽度存储到变量并将其传递给图表宽度。 这不会使图表响应。 但在首次加载时，图表会根据屏幕大小达到宽度。

但现在我面临一个挑战，我有一个不同的dc.js图表文件。

我正在通过iframe打电话。

当我通过iframe调用它时，所有div的宽度都是0，并且网页中没有图表。

但是当我单独重新加载iframe时，图表就出现了。

当我们点击该特定导航项时，我甚至尝试加载框架。 但即使这样对我也不起作用。

有人帮我克服了这个问题。

Answer 1

我已经设置了一个带有dc.js演示的plunker，我在调整大小时重新渲染，并获取容器元素的宽度来确定大小。 这是嵌入在iframe中并按原样工作。 我建议使用这个plunker来适应你的css，因为我只是做了最简单的iframe设置。 我想你做了类似的事情，所以我不确定你哪里出错了。希望这会有所帮助。

iframe中的响应式DC图表

给定带有iframe的标准页面：

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

还有一个带有容器和脚本的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>

调用以获得所需的宽度

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

Answer 2

当您在dc.js图表实例上调用.width()和.height()方法（或根本不调用它们.width()时传递null ，它将使用锚元素的宽度和高度（然后可以使用某些样式进行样式设置）来自bootstrap或其他一些响应式css框架的常青响应css类;））。

有关详细信息，请参阅： 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

给定带有iframe的标准页面：

还有一个带有容器和脚本的iframe来加载图表：

调用以获得所需的宽度

使用该宽度进行初始渲染

最后一个函数来处理窗口调整大小的操作

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

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

问题描述

2 个解决方案

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

给定带有iframe的标准页面：

还有一个带有容器和脚本的iframe来加载图表：

调用以获得所需的宽度

使用该宽度进行初始渲染

最后一个函数来处理窗口调整大小的操作

解决方案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