jqplot 调整浏览器大小时调整图表大小答案

【问题标题】：jqplot resize chart when resizing browserjqplot 调整浏览器大小时调整图表大小
【发布时间】：2012-07-20 18:49:39
【问题描述】：

在调整浏览器大小时，是否有一种简单的方法可以自动调整 jqplot 图表的大小？我一直在谷歌上寻找，但没有找到任何东西。

【问题讨论】：

标签： jqplot

【解决方案1】：

讨论了调整 jqplots 的大小here。

要使其在调整浏览器大小时正常工作，请将 replot 函数与 window.resize 事件绑定：

$(window).resize(function() {
      plot1.replot( { resetAxes: true } );
});

运行代码：

$(document).ready(function(){
    var plot1 = $.jqplot ('container', [[3,7,9,1,4,6,8,2,5]], {});
    
    $(window).resize(function() {
          plot1.replot( { resetAxes: true } );
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css">
     
<div id="container"></div>

【讨论】：

是的，这应该做+1。在我的调整大小方法中，我还添加了以下代码 - 就在我调用 replot() 之前。这样我可以确保barWidth 也将被重新调整。 $.each(plot.series, function(index, series) { series.barWidth = undefined; });
Sample showing the problem. Sample showing the solution.
谢谢@Boro，你拯救了我的一天；）
@Mark 小提琴不显示任何内容。我添加了来自cdnjs.com/libraries/jqPlot 的所有 jqplot 文件，这些文件嵌入在小提琴的 html 中，但仍然没有显示。您或其他人能告诉我如何渲染小提琴以查看解决方案吗？。
@Chris22，请参阅问题更新。将示例代码移入堆栈 sn-p。

【解决方案2】：

我发现，如果您的图表上有很多选项，使用 replot 并不总是能给出一致的结果。我发现让复杂图形处理窗口大小调整的唯一方法是粗暴地摧毁它并重建它。

function () {

    var plot;

    var renderGraph = function() {
        plot = $.jqplot('chartId', yourChartData, yourChartOptions);
    }

    renderGraph();

    var resizeGraph = function() {
        if (plot)
            plot.destroy();
        renderGraph();
    }

    $(window).resize(function() {
        resizeGraph();
    });
}

【讨论】：

这种方法比尝试使用 replot 更改大小要好得多。当然，我们使用了更多的资源，但它绝对是一致的。向@Giles 致敬