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

Question

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

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

如果使用非 ajax 图表，没有 zurb 的 autoresize 可以与来自来源的示例一起使用：

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

我花了很多时间试图解决这个问题，但在任何地方都没有看到一个完整的解决方案，可以精确调整人力车条形图的大小。 人力车示例都没有显示如何正确执行此操作。 此处提供的解决方案有效，但包含用于设置图表/图形元素宽度的硬数值（高度： $("#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>