如何使dc.js图表响应

Question

有没有什么方法可以让dc.js图表响应呢？

为了让图表适合桌面大小，我费了很大劲。

我使用的是Twitter Bootstrap 3，我将div的宽度存储到一个变量中，并将其传递给图表宽度。这不会使图表具有响应性。但在第一次加载时，图表会根据屏幕的大小达到宽度。

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

我是通过iframe打电话的。

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

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

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

谁来帮我解决这个问题。

Answer 1

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

responsive DC chart in an iframe

给定一个带有iframe的标准页面：

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

获取所需宽度的调用

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

当您在Chart实例上调用.width()和.height()方法(或根本不调用它们)时传递null时，它将使用锚元素的宽度和高度(然后可以使用bootstrap或其他响应式dc.js框架中的一些常绿响应式css类设置样式；)。

有关更多信息，请参阅：https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#dc.baseMixin+height