window.resize（）在Highcharts

$("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
}); 
 

 
//High Chart JS 
 
$(function() { 
 
    $('#container').highcharts({ 
 

 
    backgroundColor: { 
 
     stops: [ 
 
     [0, '#2a2a2b'], 
 
     [1, '#3e3e40'] 
 
     ] 
 
    }, 
 
    chart: { 
 
     type: 'area', 
 
     backgroundColor: "#000" 
 
    }, 
 
    title: { 
 
     text: 'US and USSR nuclear stockpiles', 
 
     color: '#fff' 
 
    }, 
 
    subtitle: { 
 
     text: 'Source: <a>' + 
 
     'Xylines</a>' 
 
    }, 
 
    xAxis: { 
 
     allowDecimals: false, 
 
     labels: { 
 
     formatter: function() { 
 
      return this.value; // clean, unformatted number for year 
 
     } 
 
     } 
 
    }, 
 
    yAxis: { 
 
     title: { 
 
     text: 'Nuclear weapon states' 
 
     }, 
 
     labels: { 
 
     formatter: function() { 
 
      return this.value/1000 + 'k'; 
 
     } 
 
     } 
 
    }, 
 
    tooltip: { 
 
     pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}' 
 
    }, 
 
    plotOptions: { 
 
     area: { 
 
     pointStart: 1940, 
 
     marker: { 
 
      enabled: false, 
 
      symbol: 'circle', 
 
      radius: 2, 
 
      states: { 
 
      hover: { 
 
       enabled: true 
 
      } 
 
      } 
 
     } 
 
     } 
 
    }, 
 
    series: [{ 
 
     name: 'USA', 
 
     data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640, 
 
      1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 
 
      27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 
 
      26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 
 
      24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 
 
      22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 
 
      10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104] 
 
    }, { 
 
     name: 'USSR/Russia', 
 
     data: [null, null, null, null, null, null, null, null, null, null, 
 
      5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 
 
      4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 
 
      15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 
 
      33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 
 
      35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 
 
      21000, 20000, 19000, 18000, 18000, 17000, 16000] 
 
    }] 
 
    }); 
 
});

/*! 
 
* Start Bootstrap - Simple Sidebar (http://startbootstrap.com/) 
 
* Copyright 2013-2016 Start Bootstrap 
 
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) 
 
*/ 
 

 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 220px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 220px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -220px; 
 
    overflow-y: auto; 
 
    background: #000; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 220px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -220px; 
 
} 
 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 220px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: rgba(255,255,255,0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav > .sidebar-brand { 
 
    height: 65px; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a { 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
     padding-left: 220px; 
 
    } 
 

 
    #wrapper.toggled { 
 
     padding-left: 52px; 
 
    } 
 

 
    #sidebar-wrapper { 
 
     width: 220px; 
 
    } 
 

 
    #wrapper.toggled #sidebar-wrapper { 
 
     width: 52px; 
 
    } 
 

 
    #page-content-wrapper { 
 
     padding: 20px; 
 
     position: relative; 
 
    } 
 

 
    #wrapper.toggled #page-content-wrapper { 
 
     position: relative; 
 
     margin-right: 0; 
 
     padding-left: 52px; 
 
    } 
 
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<script src="blackrockdigital.github.io/startbootstrap-simple-sidebar/js/jquery.js"></script> 
 
<!-- Sidebar --> 
 
<div id="wrapper"> 
 

 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
    <ul class="sidebar-nav"> 
 
     <li class="sidebar-brand"> 
 
     <a href="#"> 
 
     Logo 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Dashboard</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Shortcuts</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Overview</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Events</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">About</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Services</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- /#sidebar-wrapper --> 
 

 
    <!-- Page Content --> 
 
    <div id="page-content-wrapper"> 
 
    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
 
    <div class="container-fluid" style="background:#000"> 
 
     <div id="container" style="background:#000"></div> 
 
    </div> 
 
    </div> 
 
    <!-- /#page-content-wrapper --> 
 

 
</div>

当我切换在大，中型屏幕，我希望图表重绘或调整菜单，我尝试了很多，但力有任何输出。

我想这 $(window).resize(); #container: redraw();

这里的链接的jsfiddle https://jsfiddle.net/dLujgtf9/

有人可以帮我请，我从最后2天激怒了在此，我的老板喊像地狱... ..

感谢&问候

zeasts

来源

2016-06-28 Riot Zeast Captain

，我可以用小提琴看到，它的包裹是在调整，所以请尝试调用'回流（）'方法上highcharts考虑别人面前容器：http://api.highcharts.com/highcharts# Chart.reflow – wmash

你检查了这个：http://stackoverflow.com/questions/14100011/highcharts-redraw-vs-new-highcharts-chart – vijayP

'redraw（）'和'reflow（）'是用于不同的目的。 'redraw（）'仅在数据动态添加时使用。从我所看到的（以及我所尝试的），它不会改变它的大小。 'reflow（）'做。请参阅API链接 – wmash

我已成功地再次修改小提琴，以满足您的需求，我认为：jsFiddle

添加一个匿名函数到混合似乎对它进行排序：

setInterval(function() { 
    $("#container").highcharts().reflow(); 
}, 1);

来源

2016-06-28 10:48:35 wmash

正常工作谢谢@ wmash –

-1

我添加了下面的代码，它工作正常。它不重绘但调整大小。

$(window).resize(function() { 

      $("#container").width($(window).width()-250); 

    });

PS：我修改了下面的CSS设置：

@media（最小宽度：200像素）

你肯定你不能调整？

来源

2016-06-28 10:16:30

的答案在我的结尾它不在工作，我不能调整大小。 @yu wayne –

这是调整OP已经完成的容器。它正在调整他们正在努力的图表 – wmash

如果您调整容器大小，它也应调整图表大小。请参阅http://stackoverflow.com/questions/13768565/resize-height-with-highcharts。我的代码在我的电脑上工作（容器和图表）。也许你可以尝试删除一些CSS引用。 –

我不知道为什么我有重新查询，但这对我有用。

angular.element(window).trigger('resize'); 
    var allCharts = document.querySelectorAll('[data-highcharts-chart]'); 
    for(var x = 0; x<allCharts.length; x++){ 
     angular.element('[data-highcharts-chart=' + x + ']').highcharts().reflow(); 
    }

来源

2016-07-22 17:53:52 httpete

我没有在angularjs中使用:(@httpette –

所以修改，但你希望与jQuery – httpete

window.resize（）在Highcharts

zeasts

回答

相关问题