Как сделать диаграммы dc.js отзывчивыми

Есть ли способ сделать диаграммы dc.js отзывчивыми?

Я много борюсь за то, чтобы графики соответствовали размеру рабочего стола.

Я использую Twitter Bootstrap 3. Я сохраняю ширину div переменной и передаю ее ширине диаграммы. Это не повлияет на график. Но при первой загрузке графики получают ширину в соответствии с размером экрана.

Но теперь я сталкиваюсь с проблемой в нем, что у меня есть другой файл для диаграммы dc.js.

Когда я вызываю его через iframe, ширина равна 0 для всех div, и на веб-странице не отображаются диаграммы.

Но когда я перезагружаю только iframe, появляются диаграммы.

Я даже пытался загрузить фрейм, когда мы нажимаем на этот конкретный элемент навигации. Но даже это не сработало для меня.

Ответы

Ответ 1

Я установил плункер с демонстрацией dc.js, которую я изменил при рендеринге, и получив ширину элемента контейнера, чтобы определить размер. Это встроено в iframe и работает как есть. Я предлагаю играть с этим плунжером в соответствии с вашим css, поскольку я просто делаю простейшую возможную настройку iframe. Я предполагаю, что вы сделали что-то похожее на это, поэтому я не совсем уверен, где вы поступили неправильно. Надеюсь, это поможет.

отзывчивая диаграмма DC в 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);
};