Question

我也无法调整图表大小。我正在使用人力车和zurb基础，我需要自动调整ajax图表，这将在面板容器中调整大小如下：

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

如果使用非ajax图表，不使用zurb的自动调整可以使用源代码中的示例：

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

Answer 1

我实际上和你的情况相同。

因此，我搜索了源代码，并找到了解决方案。

您需要在设置尺寸之前调用属性graph。

例如：

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

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

如您所见，我使用属性graph访问图形对象并设置宽度和高度。

最好的问候。

Answer 2

我花了很多时间试图解决这个问题，并没有看到任何精确重新设计人力车条形图的完整解决方案。人力车的例子都没有说明如何正确地做到这一点。此处介绍的解决方案有效，但包含硬数值（height：$（“＃chart”）。width（）* 0.5 ）来设置图表/图表元素的宽度。这将重新调整大小，但它将始终在包含的html元素中查看或倾斜为了确保正确调整大小，让html渲染通过引用包含元素的图表/图形中的维度为您完成工作。要动态调整人力车条形图（或其他人力车图表元素）的大小，请执行以下操作：

<!--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>

自动调整ajax图表rickshaw.js与zurb基础

2 个答案: