Question

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

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

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

我尝试过的技巧： 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'});

demo

用于点击+动画：

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

Demo

单击时展开FLOT图

2 个答案: