如何调整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。

Answer 1

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

来自插件文档：

  

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

     

它通过监听占位符div的变化（通过   jQuery resize event plugin） - 如果大小改变，它将重绘   曲线图。

可以从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%"或您想要的金额即可。
在给出百分比时，确保每次调整窗口大小时都会计算新的大小。