单击时展开 FLOT 图答案

【问题标题】：Expanding FLOT graph on click单击时展开 FLOT 图
【发布时间】：2014-07-28 13:40:25
【问题描述】：

我正在使用 flot 库来绘制一些数据。 Flot 使用该 div 的 height 和 width 属性来绘制数据图，如下所示

<div id="graph" style="width: 300px; height: 300px;"></div>

我想让这个图形（div）可点击，它可以扩展到更大的尺寸，比如 500*500。这意味着绘图的宽度和高度应为 500*500，但应首先在 300*300 中可见。单击后，它应该展开并显示其原始大小。我想设置初始高度和宽度是浮动工作所必需的。我怎样才能做到这一点？

我尝试过的技术： 1）使用jquery toggle，它采用父类并像这样对其高度和宽度进行动画处理

$(this).parent().animate({'height': '500px'},{'width': '500px'});

【问题讨论】：

标签： javascript jquery html css flot

【解决方案1】：

您可以使用您的代码来扩展图形，但您也必须使用新的大小重新绘制它。使用此代码，您可以在扩展完成后重新绘制图形：

$('#graph').on('click', function () {
    $(this).animate({
        'height': '600px',
        'width': '600px'
    }, function () {
        plot.resize();
        plot.setupGrid();
        plot.draw();
    });
})

【讨论】：

【解决方案2】：

对于动画尝试这样：

$('#graph').animate({'height': '500px','width': '500px'});

demo

点击+动画：

$('#graph').on('click', function(){
   $(this).animate({'height': '500px','width': '500px'});
})

Demo

【讨论】：