如何调整 jQuery 流程图的大小？

Question

我有一个带有以下代码的 jQuery 流程图：

$("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 。

Answer 1

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

来自插件文档：

Flot 插件，用于在占位符出现时自动重绘绘图
大小变化，例如窗口大小调整。

它的工作原理是监听占位符 div 的变化（通过
jQuery resize 事件插件） - 如果尺寸发生变化，它将重绘
情节。

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

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

Answer 3

只需删除 "height:200px" 并为其指定 "height:40%" 或您想要的金额。
在给出百分比时，您可以确保每次调整窗口大小时都会重新计算大小。