如何调整jQuery flot图表的大小？

Question

我有一个jQuery flot图表，代码如下：

$("table.statics").each(function() {
    var colors = [];
    $("table.statics thead th:not(:first)").each(function() {
        colors.push($(this).css("color"));
    });
    $(this).graphTable({
        series: 'columns',
        position: 'replace',
        height: '200px',
        colors: colors
    }, {
        xaxis: {
            tickSize: 1
        }
    });
});

这段代码可以正常运行，但是现在我希望当窗口大小改变时图表也能随之自适应大小。

怎样实现呢？我已经在文档中包含了jquery.flot.resize.js。

- Maanstraat

Answer 1

只需添加对 flot 图表附带的 jquery.flot.resize.js 插件的引用即可。

来自插件文档：

Flot 插件，用于在占位符大小更改时自动重绘图表，例如在窗口调整大小时。

它通过监听占位符 div 上的更改（通过 jQuery 调整事件插件） - 如果大小更改，则会重新绘制图表。

可从 http://www.flotcharts.org/ 下载。

- Yuriy Kvartsyanyy

Answer 2

这很容易解决 - 你只需要在jquery.flot.pie.js中添加一行代码即可：

var attempts = 0;
redraw = true; /* <--add this as line #281 */
while (redraw && attempts<redrawAttempts) 

我从这里找到了解决方案： https://github.com/flot/flot/commit/a2c38dc96489a217127c614879fa4dc9c8142f10#diff-0

- Joe

Answer 3

只需删除 "height:200px" 并将其更改为 "height:40%" 或您想要的高度。使用百分比可以确保每次调整窗口大小时都会重新计算大小。

- mas-designs

---

我想调整的不是图表的高度，而是宽度。但是我已经找到了宽度，谢谢！ :) - Maanstraat

这对我不起作用，也许语法不正确？@Maanstraat 写的是 height: '200px'，而不是 "height:200px"。 - knocte