Question

我想根据方向调整Jqplot图表的大小。我有以下代码。它不起作用。

    var plot = $.jqplot('chartDivId', dataArray, options);
        var w = parseInt($(".jqplot-yaxis").width(), 10) + parseInt($("#chartDivId").widt(), 10);
        var h = parseInt($(".jqplot-title").height(), 10) + parseInt($(".jqplot-xaxis").height(), 10) + 
    parseInt($("#chartDivId").height(), 10);
        $("#chartDivId").width(w).height(h);
        plot.replot();

        $(window).on("orientationchange",function(event){
      alert("Orientation is: " + event.orientation);
        plot.replot( { resetAxes: true } );
    });

如果注释掉以下代码

，它将起作用

   /*    var w = parseInt($(".jqplot-yaxis").width(), 10) + parseInt($("#chartDivId").width(), 10);
         var h = parseInt($(".jqplot-title").height(), 10) + parseInt($(".jqplot-xaxis").height(), 10) + parseInt($("#chartDivId").height(), 10);
         $("#chartDivId").width(w).height(h);
         plot.replot();
   */

我不想评论上面的代码，我该如何解决这个问题呢？

谢谢......约翰逊

Answer 1

方向改变会导致div /容器/窗口大小发生变化。所以你可以使用jQuery的resize事件来实现它。

所以这样做的代码如下。

$(window).on("resize",function(event){
    plot.destroy(); // Destroy the chart..
    plot.replot(); // Replot the chart with new/old values..
});

在这里查看工作小提琴：jqPlot Line Chart - Replot on resize event

如果您无法在Google Chrome中看到输出（图表），请尝试使用其他浏览器。

如果它没有帮助，希望您使用更多代码更新您的代码段。

希望它有所帮助。

调整JQPlot图表问题的大小

1 个答案: