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

Question

我在调整图表大小时也遇到了麻烦。我正在使用 rickshaw 和 zurb Foundation，我需要自动调整 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来访问图形对象并设置宽度和高度。

致以诚挚的问候。