javascript - 使用 zurb 基础自动调整 ajax 图表 rickshaw.js

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

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