JQuery 탭의 하이 차트 - 숨겨진 탭 코드의 크기를 조정하면 보이는 탭의 크기가 변경되지 않습니다.

한 가지 문제가 해결되어 다른 문제가 발생했습니다.JQuery 탭의 하이 차트 - 숨겨진 탭 코드의 크기를 조정하면 보이는 탭의 크기가 변경되지 않습니다.

jQuery UI 탭에 2 개의 하이 차트 그래프가 있습니다. 초기에 HIDDEN 탭의 차트는 브라우저 윈도우의 크기를 조정할 때 너비의 크기를 조정하지 않습니다. 이 코드로 수정했습니다 :

$("#jQTab").on( 
      "tabsactivate", 
      function(event, ui) { 
       if(ui.newPanel[0].id == "jQTab_1") { var chart = $('#container_1').highcharts();      
                 chart.update({ chart: { renderTo: 'jQTab_1', width: $('#jQTab_1').width() } }); 
       }  
       if(ui.newPanel[0].id == "jQTab_2") { var chart = $('#container_2').highcharts();      
                 chart.update({ chart: { renderTo: 'jQTab_2', width: $('#jQTab_2').width() } }); 
       }  
      } 
);

그러나 두 번째 문제가 발생했습니다. VISIBLE 차트는 브라우저 창의 너비가 변경되면 너비가 변경되지 않습니다.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Highcharts Resizing Issues in JQuery Tabs</title> 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

    <script src="https://code.highcharts.com/highcharts.js"></script> 
    <script src="https://code.highcharts.com/highcharts-more.js"></script> 
    <script src="https://code.highcharts.com/modules/exporting.js"></script> 

    <script>  
    $(function() {  

$("#jQTab").tabs(); 

var chart_1 = Highcharts.chart('container_1', {  title: {   text: 'Chart.update'  },  subtitle: {   text: 'Plain'  },  xAxis: {   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']  },  series: [{   type: 'column',   colorByPoint: true,   data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],   showInLegend: false  }] }); 
var chart_2 = Highcharts.chart('container_2', {  title: {   text: 'Chart.update'  },  subtitle: {   text: 'Plain'  },  xAxis: {   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']  },  series: [{   type: 'column',   colorByPoint: true,   data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],   showInLegend: false  }] }); 


$("#jQTab").on( 
      "tabsactivate", 
      function(event, ui) { 
       if(ui.newPanel[0].id == "jQTab_1") { var chart = $('#container_1').highcharts();      
                 chart.update({ chart: { renderTo: 'jQTab_1', width: $('#jQTab_1').width() } }); 
       }  
       if(ui.newPanel[0].id == "jQTab_2") { var chart = $('#container_2').highcharts();      
                 chart.update({ chart: { renderTo: 'jQTab_2', width: $('#jQTab_2').width() } }); 
       }  
      } 
); 

}); 
</script> 

</head> 


<body> 
<div id="jQTab"> 
    <ul> 
    <li><a href="#jQTab_1">Tab 1</a></li> 
    <li><a href="#jQTab_2">Tab 2</a></li> 
    </ul> 
    <div id="jQTab_1"> <div id="container_1"></div></div> 
    <div id="jQTab_2"> <div id="container_2"></div></div> 
</div> 
</body> 
</html>

출처

2017-02-01 user3341576

대신 명시 적으로 폭을 설정하는 chart.reflow()를 사용할 수 있습니다

여기에 전체 코드입니다.

$("#jQTab").on(
    "tabsactivate", 
    function(event, ui) { 
    if (ui.newPanel[0].id == "jQTab_1") { 
     var chart = $('#container_1').highcharts(); 
     chart.reflow(); 
    } 
    if (ui.newPanel[0].id == "jQTab_2") { 
     var chart = $('#container_2').highcharts(); 
     chart.reflow(); 
    } 
    } 
);

예 : https://jsfiddle.net/w2b1zgz1/

출처

2017-02-02 13:24:13 morganfree

시각이 조정은 매우 빠르다. 감사. – user3341576

JQuery 탭의 하이 차트 - 숨겨진 탭 코드의 크기를 조정하면 보이는 탭의 크기가 변경되지 않습니다.

답변

관련 문제