javascript - 如何使 dc.js 图表响应

有什么方法可以使 dc.js 图表具有响应性吗？

为了让图表适合桌面大小，我付出了很多努力。

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

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

我正在通过 iframe 调用。

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

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

我什至尝试在我们单击该特定导航项时加载框架。但即使那样对我也不起作用。

有人帮我解决了这个问题。

最佳答案

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

responsive DC chart in an iframe

给定一个带 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);
};

关于javascript - 如何使 dc.js 图表响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22292369/