当调整浏览器大小时，如何调整jqplot图表大小

Question

在调整浏览器大小时，是否有一种简单的方法自动调整jqplot图表的大小？我在谷歌上搜索了很久，但没有找到相关信息。

- hacket

Answer 1

这里讨论了如何调整jqplots的大小，可以在这里查看。

为使其在浏览器调整大小时正常工作，请将重新绘制函数与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>

- Mark

---

好的，应该没问题 +1。在我的缩放方法中，我还添加了以下代码 - 就在调用 replot() 之前。这样我就能确保 barWidth 也会被重新缩放。 $.each(plot.series, function(index, series) { series.barWidth = undefined; }); - Boro

问题示例 解决方案示例 - Boro

谢谢@Boro，你救了我的一天 ;) - ggcodes

@Mark，这个fiddle没有显示任何内容。我已经从https://cdnjs.com/libraries/jqPlot添加了所有嵌入在fiddle中的jqplot文件，但仍然没有显示任何内容。你或者其他人能告诉我如何渲染fiddle以查看解决方案吗？ - Chris22

@Chris22，请查看问题的更新。将示例代码移入了堆栈片段中。 - Mark

@Mark 谢谢。我已经阅读了那篇文章，但那个解决方案并不是我需要的。我希望能够在响应式调整大小时将饼图和图例分别放在不同的列中（图例在调整大小时垂直堆叠在饼图下方）。但似乎不可能实现。我无法将图例放在它自己的列中。 - Chris22

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

- Giles Roberts

---

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