javascript - 点击展开 FLOT 图

Question

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

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

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

我尝试过的技术:1) 使用 jquery toggle 获取父类并像这样设置其高度和宽度的动画

$(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();
    });
})