响应式高图不能正确调整窗口大小，直到窗口大小调整

我正在使用Zurb的Foundation框架中的Highcharts作为一个类的项目。在章节选项卡中有三个图表。一个在12列div内，另外两个在6列div内同行。

当页面加载时，精选图表不占用12列的可用宽度，两个较小的图表溢出其6列。但是，当调整窗口大小或尝试使用Inspect元素进行调查时，图表会立即捕捉到正确的维度。这种行为发生在Chrome，FF和IE中。

我意识到我可以设置一个特定的宽度，但我真的想利用基金会，并保持他们的响应。

我已经调整了CSS和Highcharts初始化，但我很难过。有没有人遇到过这个问题？任何人都可以看到我失踪？

这里是我的HTML摘录：

<div class="row"> <div class="twelve columns"> <!--begin tabs below--> <div class="section-container tabs" data-section="tabs"> <section> <p class="title" data-section-title><a href="#">Heart Disease</a></p> <div class="content" data-section-content id="heart"> <div class="row feature-chart"> <div class="large-12 columns"> <div id="heartTimeline-container"> <div id="heartTimeline"></div> </div> </div> <!--close 12 columns--> </div> <!--close row--> <div class="row small-charts"> <div class="large-6 columns"> <div id="heartDemo"></div> </div> <!--close 6--> <div class="large-6 columns"> <div id="heartStages"></div> </div> <!--close 6--> </div> <!--end row--> </div> </section> </div> </div> <!--end twelve columns-->

这里是Highcharts js：

 $(function () { Highcharts.setOptions({ colors: ['#1A1A1A', '#455D78', '#BDCCD4', '#999999', '#B3B3B3', '#F2F2F2' ] }); $('#heartTimeline').highcharts({ chart: { type: 'area' }, title: { text: 'Heart Disease Death Rates in the USfrom 1980-2010' }, subtitle: { text: 'Source: <a href="http://www.mdch.state.mi.us/pha/osr/deaths/Heartdx.asp">'+ 'Michigan Department of Community Health</a>' }, xAxis: { labels: { formatter: function() { return this.value; // clean, unformatted number for year } } }, yAxis: { title: { text: 'Heart Disease Death Rate Per 100,000 People' }, labels: { formatter: function() { return this.value / 1 +'k'; } } }, tooltip: { pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>deaths per hundred thousand people in {point.x}' }, plotOptions: { area: { pointStart: 1980, marker: { enabled: false, symbol: 'circle', radius: 2, states: { hover: { enabled: true } } } } }, series: [{ name: 'Heart Disease', data: [412.1, 397, 389, 388, 378, 375, 365.1, 355.9, 352.5, 332, 321.8, 313.8, 306.1, 309.9, 299.7, 296.3, 288.3, 280.4, 272.4, 267.8, 257.9, 247.8, 240.8, 232.3, 217, 211.1, 200.2, 190.9, 186.5, 180.1, 178.5] }, ] }); }); $(function () { $('#heartDemo').highcharts({ chart: { zoomType: 'xy' }, title: { text: 'Most Prevelant Causes and Effects of Heart Disease 2013' }, subtitle: { text: 'Source: http://circ.ahajournals.org (The American Heart Association)' }, xAxis: [{ categories: ['Smoking', 'Obesity (BMI > 25 kg) ', 'Total cholesterol > 200 mg)', 'High Blood Pressure', 'Diabetes Mellitus', 'Prediabetes', 'Total Cardiovascular Disease', 'Stroke', 'Coronary Heart Disease', 'Heart Failure'], labels: { rotation: -90, align:'right' } }], yAxis: [{ // Primary yAxis labels: { formatter: function() { return this.value +'%'; }, style: { color: '#000000' } }, title: { text: 'Men', style: { color: '#BDCCD4' } }, opposite: true }, { // Secondary yAxis gridLineWidth: 0, title: { text: 'Both Sexes', style: { color: '#455D78' } }, labels: { formatter: function() { return this.value +' %'; }, style: { color: '#4572A7' } } }, { // Tertiary yAxis gridLineWidth: 0, title: { text: 'Women', style: { color: '#AA4643' } }, labels: { formatter: function() { return this.value +' %'; }, style: { color: '#AA4643' } }, opposite: true }], tooltip: { shared: true }, legend: { layout: 'vertical', align: 'left', x: 120, verticalAlign: 'top', y: 80, floating: true, backgroundColor: '#FFFFFF' }, series: [{ name: 'Both Sexes', color: '#455D78', type: 'column', yAxis: 1, data: [19, 68.2, 43.4, 33, 8.3, 38.2, 35.3, 2.8, 6.4, 2.1], tooltip: { valueSuffix: ' %' } }, { name: 'Women', type: 'spline', color: '#AA4643', yAxis: 2, data: [16.7, 63.7, 44.9, 32.2, 7.9, 30.5, 34, 3, 5.1, 1.8], marker: { enabled: false }, dashStyle: 'shortdot', tooltip: { valueSuffix: ' %' } }, { name: 'Men', color: '#BDCCD4', type: 'spline', data: [21.3, 72.9, 41.3, 33.6, 8.7, 46, 36.7, 2.6, 7.9, 2.5], tooltip: { valueSuffix: ' %' } }] }); }); $(function () { $('#heartStages').highcharts({ chart: { type: 'column' }, title: { text: 'Number of Deaths for Different Types of Heart Diseases in the US for 2008' }, subtitle: { text: 'Source: <a href="http://www.nhlbi.nih.gov/resources/docs/2012_ChartBook_508.pdf">'+ 'Morbitity & Mortality: 2012 Chart Book on Cardiovascular, Lung and Blood Disease</a>' }, xAxis: { categories: [ 'Coronary Heart Disease', 'Heart Attack', 'Cardiomyopathy', 'Stroke', 'Atrial Fibrillation and Flutter', 'Heart Failure', 'Diseases of Pulmonary Circulation', 'Pulmonary Embolism', ], labels: { rotation: -90, align:'right' } }, yAxis: { min: 0, title: { text: 'Heart Disease Diagnostic Category (thousands)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: 'Heart Disease Related Deaths for 2008', data: [405.309, 133.958, 23.932, 134.148, 15.383, 56.830, 12.927, 7.158] }] }); });

我从另一个答案中得到了这个，所以在这个问题上给了大家一些荣誉。

解决方法：调用$(window).resize(); 在加载图表之后（或者当您填充数据时）

只要使用chart.reflow()函数

请看下面的例子：

http://jsbin.com/anuqav/1/edit

http://jsfiddle.net/2gtpA/show/

 <div id="container" style="width:100%;margin: 0 auto"></div>

这可能有助于：

 $(Highcharts.charts).each(function(i,chart){ var height = chart.renderTo.clientHeight; var width = chart.renderTo.clientWidth; chart.setSize(width, height); });

现在sorting一个旧的话题，但我有这个问题与IE8。在编写本文时，IE的当前版本是IE10，但我需要使我的站点与早期版本兼容。为我工作的解决scheme是上面和其他网站的组合，人们谈到他们实施的解决scheme。我去了一个settimeout加上一个resize，只是执行IE8，我希望这可以帮助像我这样的人试图find一个解决scheme几个小时。

您可能会发现只有脚本部分是您需要的唯一部分。

 <!--[if IE 8]> <script src="html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script> function timeout() { $(window).resize(); } window.setTimeout(function() { timeout(); },2000); </script> <style> .highcharts-container{width:100% !important; height:100% !important;} </style> <![endif]-->

您可以使用此代码作为示例

 var chart; $(function() { var newh = $("#container").height(); $( window ).resize(function() { newh = $("#container").height(); chart.redraw(); chart.reflow(); }); chart = new Highcharts.Chart(); })

http://jsfiddle.net/Behseini/qheh4w0n/

只有这对我有效

 $(window).resize(function(){ $scope.chartConfig.getChartObj().reflow() });

只是想添加另一个解决scheme：

 $('.chart').highcharts(options, function(chart) { setTimeout(function() { chart.reflow(); }); });

它所做的就是在下一个框架被渲染后重新绘制图表。

对我而言，它需要延迟一些时间并触发窗口大小调整。

 window.setTimeout(function(){ $(window).trigger('resize'); }, 500);

 $(Highcharts.charts).each(function(i,chart){ var height = chart.renderTo.clientHeight; var width = chart.renderTo.clientWidth; chart.setSize(width, height); });

这个对我有用