Highcharts中的window.resize（）

本文介绍了Highcharts中的window.resize（）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 $（＃menu-toggle）。click（function（e）{e.preventDefault（）; $（＃ wrapper）。toggleClass（toggled）;}）; // High Chart JS $（function（）{$（'＃container'）。highcharts（{backgroundColor：{stops：[[0，'＃2a2a2b'] ，[1，'＃3e3e40']]}，图表：{type：'area'，backgroundColor：＃000}，title：{text：'US and USSR nuclear stockpiles'，color：'＃ff'}，副标题：{text：'来源：< 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（）{返回this.value / 1000 +'k'; }，}工具提示：{pointFormat：'{series.name}已生成< b> {point.y：，。0f}< / b>< br /> {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,1500,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 / Russi a'，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,2125,23044,25393,27935,30062,32049,33352,35804,37431,39197,45000， 43000,41000,39000,37000,35000,33000,31000,29000,27000,25000,24000,23000,220001,21000,20000,19000,18000,18000,17000,16000]}]}）;}）; / *！ *启动Bootstrap - 简单侧栏（http://startbootstrap.com/）*版权所有2013-2016启动Bootstrap *在MIT下获得许可（https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE）* / / *切换样式* / #wrapper {padding-left：0; -webkit-transition：全部0.5秒轻松; -moz-transition：全部0.5秒轻松; -o-transition：全部0.5s轻松;转换：全部0.5s轻松;}＃wrapper.toggled {padding-left：220px;}＃sidebar-wrapper {z-index：1000;位置：固定;左：220px;宽度：0;身高：100％; margin-left：-220px; overflow-y：auto;背景：＃000; -webkit-transition：全部0.5秒轻松; -moz-transition：全部0.5秒轻松; -o-transition：全部0.5s轻松;转换：全部0.5s轻松;}＃wrapper.toggled #sidebar-wrapper {width：220px;} #page-content-wrapper {width：100％;位置：绝对; padding：15px;} #wrapper.toggled #page-content-wrapper {position：absolute; margin-right：-220px;} / *侧边栏样式* /。sidebar-nav {position：absolute;顶部：0;宽度：220px;保证金：0;填充：0; list-style：none;}。sidebar-nav li {text-indent：20px; line-height：40px;}。sidebar-nav li a {display：block; text-decoration：none;颜色：＃999999;}。sidebar-nav li a：hover {text-decoration：none;颜色：#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 {身高：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;位置：相对; }＃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 =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.cssintegrity = sha384-1q8mTJOASx8j1Au + a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7crossorigin =anonymous><！ - 可选主题 - >< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3。 6 / css / bootstrap-theme.min.cssintegrity =sha384-fLW2N01lMqjakBkx3l / M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV + 0En5rcrossorigin =anonymous><！ - 最新编译和缩小的JavaScript - >< script src = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.jsintegrity =sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xScrossorigin =anonymous> < / script>< script src =blackrockdigital.github.io/startbootstrap-simple-sidebar/js/jquery.js>< / script><！ - 补充工具栏 - >< div id = 包装 > <！ - 补充工具栏 - > < div id =sidebar-wrapper> < ul class =sidebar-nav> < li class =sidebar-brand> < a href =＃>徽标< / a> < /锂> <李> < a href =＃>仪表板< / a> < /锂> <李> < a href =＃>快捷方式< / a> < /锂> <李> < a href =＃>概述< / a> < /锂> <李> < a href =＃>事件< / a> < /锂> <李> < a href =＃>关于< / a> < /锂> <李> < a href =＃>服务< / a> < /锂> <李> < a href =＃>联系< / a> < /锂> < / UL> < / DIV> <！ - / #sidebar-wrapper - > <！ - 页面内容 - > < div id =page-content-wrapper> < a href =＃menu-toggleclass =btn btn-defaultid =menu-toggle>切换菜单< / a> < div class =container-fluidstyle =background：＃000> < div id =containerstyle =background：＃000>< / div> < / DIV> < / DIV> <！ - / #page-content-wrapper - >< / div> 当我在大屏幕和中屏幕切换菜单时，我希望图表重新绘制或调整大小，我尝试了很多但是dint得到了任何输出。我试过这个 $（窗口）.resize（）; #container：redraw（）; 这里是jsfiddle链接 https：// jsfiddle .net / dLujgtf9 / 有人可以帮帮我吗，过去2天我对此感到恼火，我的Boss大喊大叫...... .. 谢谢&问候 zeasts 解决方案我设法再次修改小提琴为了满足您的需求，我认为： jsFiddle 在混合中添加一个匿名函数似乎对它进行排序： setInterval（function（）{ $（ #container）。highcharts（）。reflow（）; }，1）;$("#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"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"><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><div id="wrapper">  <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>   <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> </div>When I toggle the menu in Large and Medium screen I want the Chart to redrawn or resized, I tried many but dint got any output.I tried this$(window).resize();#container: redraw();here's the jsfiddle link https://jsfiddle.net/dLujgtf9/Can someone help me please, I got irritated up in this from last 2 days, my Boss is shouting like hell.....Thanks & regardszeasts 解决方案 I have managed to amend the fiddle again to suit your needs I think: jsFiddleAdding an anonymous function into the mix seemed to sort it:setInterval(function() { $("#container").highcharts().reflow();}, 1); 这篇关于Highcharts中的window.resize（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！