JQueryタブのハイチャート - 非表示タブのサイズを変更すると表示タブのサイズが変更されなくなる

問題を1つ解決して別の問題を作成しました。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() } }); 
       }  
      } 
);

しかしこれで2番目の問題が発生しました。 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タブのハイチャート - 非表示タブのサイズを変更すると表示タブのサイズが変更されなくなる

答えて

関連する問題