文章/答案/技术大牛

发布

社区首页 >问答首页 >JQuery标签中的高亮图表-调整隐藏标签代码停止调整可见标签大小

问JQuery标签中的高亮图表-调整隐藏标签代码停止调整可见标签大小
EN

Stack Overflow用户

提问于 2017-02-02 00:55:22

回答 1查看 336关注 0票数 0

我解决了一个问题，又创造了另一个问题。

我在jQuery UI选项卡中有两个Highchart图形。最初，当浏览器窗口调整大小时，隐藏选项卡中的图表不会调整其宽度。我用下面的代码修复了这个问题：

$( "#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() } });
               }    
             }
);

但这产生了第二个问题。现在，当浏览器窗口的宽度更改时，可见图表的宽度不会更改。

下面是完整的代码：

<!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>

javascript

highcharts

jquery-ui-tabs

autoresize

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-02 21:24:14

您可以使用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/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41985318

复制

相似问题

问JQuery标签中的高亮图表-调整隐藏标签代码停止调整可见标签大小
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery标签中的高亮图表-调整隐藏标签代码停止调整可见标签大小EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery标签中的高亮图表-调整隐藏标签代码停止调整可见标签大小
EN