브라우저 크기를 조정할 때 jqplot 차트 크기 조정

Question

브라우저 크기를 조정할 때 jqplot 차트를 자동 크기 조정하는 쉬운 방법이 있습니까? 나는 Google에서 찾고 있었지만 아무것도 발견하지 못했습니다.

Answer 1

jqplots 크기 조정은 here으로되어 있습니다. 이 브라우저 크기를 조정할 때 작동하게하려면

의 window.resize 이벤트로 replot 기능을 결합 :

$(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>

Answer 2

I을 그래프에 많은 옵션이있는 경우 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(); 
    }); 
}