使用 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>