按下展开FLOT图

Question

我正在使用flot库来绘制一些数据。Flot使用该div的高度和宽度属性来绘制数据图如下

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

我想让这个图形(Div)可以点击，它可以扩展到更大的大小，比如500*500。这意味着地块的宽度和高度应该是500*500，但第一次出现在300*300中。单击后，应该展开并显示其原始大小。我想设置初始高度和宽度是需要的工作。我怎样才能做到这一点？

我尝试过的技术: 1)使用jquery切换，它接受父类并像下面这样动画化它的高度和宽度

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

Answer 1

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

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

Answer 2

对于动画，请尝试如下：

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

演示

对于单击+动画：

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

演示