使用 zurb 基础自动调整 ajax 图表 rickshaw.js 的大小

Question

I also have trouble with resizing charts. I'm using rickshaw and zurb foundation, I need autoresize ajax chart which will resizing within panel container like this:

<div class="panel>
  <div id="chart"></div>
</div>

If use non ajax charts, autoresize without zurb works with example from sources:

https://github.com/shutterstock/rickshaw/blob/master/examples/resize.html

Answer 1

I am actually in same situation than you.

Thus, I searched in the source code and I've found a solution.

You need to call the property graph before set the sizes.

For instance:

var ajaxGraph = new Rickshaw.Graph.Ajax({ … });

$( window ).resize(function () {
  ajaxGraph.graph.configure({
    width: $("#chart").width(),
    height: $("#chart").width() * 0.5
  });
  ajaxGraph.graph.render();
});

As you can see, I use the property graph to access to graphic object and set the width and height.

Best regards.

Answer 2

I spent much time trying to resolve this and did not see a complete solution anywhere that precisely re-sized rickshaw bargraphs. None of the rickshaw examples shows how to do this correctly. The solution presented here works, but contains are hard number value (height: $("#chart").width() * 0.5 ) to set the width of the chart/graph element. This will re-size, however it will always look off or skewed within the containing html element.
To ensure correct sizing let the html rendering do the work for you by referencing the dimensions within the chart/graph containing element. To dynamically re-size the rickshaw bargraph (or other rickshaw chart element) do the following:

<!--div tag id="barGraphContainer with nested div tag containing the id    "bars" used to contain the rickshaw graph/chart element-->
<div id="barGraphContainer">
<div id="bars"></div>
</div>

<!--script tag to contain the resize() JS function-->
<script>

var graph = new Rickshaw.Graph({
element: document.getElementById("bars"),
renderer: 'bar',
series: [{data: [{ x: 0, y: 10 }, { x: 1, y: 18 }]),color: 'green'}]
});

//get the html element for the container
var barElement = document.getElementById("barGraphContainer"); 
var resize = function () {
graph.configure({
width: barElement.clientWidth, //html is "auto-magically" rendering size
height: barElement.clientHeight //leverage this for precise re-size scalling
});
graph.render();
}
window.addEventListener('resize', resize);
resize();
</script>