如何使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