How to make the dc.js charts responsive

前端未结

关注

 2  1892

萌比男神i

Is there a any way to make the dc.js charts responsive?

I\'m struggling a lot to make the charts fit the desktop size.

I\'m using Twitter Bootstrap

相关标签:

2条回答

情深已故

2021-02-12 14:54

When you pass null when calling .width() and .height() methods (or not calling them at all) on the dc.js Chart instance, it will use width and height of the anchor element (which can then be styled with some evergreen responsive css classes either from bootstrap or some other responsive css framework ;)).

For more info see: https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#dc.baseMixin+height

0 讨论(0)
发布评论:

提交评论
- 加载中...

攒了一身酷

2021-02-12 15:18

I've set up a plunker with a dc.js demo that I have rerendering when resized, and getting the width of the container element to determine the size. This is embedded in an iframe and working as-is. I suggest playing with this plunker to fit your css, as I'm just making the simplest possible iframe setup. I'm imagining you did something similar to this, so I"m not exactly sure where you went wrong. Hopefully this helps.

responsive DC chart in an iframe

Given a standard page with an iframe:

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

And an iframe with containers and scripts to load the chart:

<body> <h2>inside iframe</h2> 
   <div id="box-test"></div>
   <div id="pie-chart"></div> 
   <script src="script.js" type="text/javascript"></script> 
</body>

A call to get the width you need

var width = document.getElementById('box-test').offsetWidth;

Using that width for the initial render

chart
  .width(width)
  .height(480)
  .margins({top: 10, right: 50, bottom: 30, left: 50})
  .dimension(experimentDimension)
  .group(speedArrayGroup)
  .elasticY(true)
  .elasticX(true);

And finally a function to handle what to do on window resize

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

0 讨论(0)