在调整窗口大小之前，响应式 Highcharts 无法正确调整大小
Posted
技术标签:
【中文标题】在调整窗口大小之前，响应式 Highcharts 无法正确调整大小【英文标题】：Responsive Highcharts not sizing correctly until window resize 【发布时间】：2013-04-17 11:16:16 【问题描述】：我在 Zurb 的 Foundation 框架中使用 Highcharts 进行类项目。我在一个部分选项卡中有三个图表。一个在 12 列 div 内，另外两个在 6 列 div 内的同一行。
当页面加载时，特色图表不会占用 12 列的可用宽度，两个较小的图表会溢出它们的 6 列。但是，当调整窗口大小或我尝试使用 Inspect 元素进行调查时，图表会立即捕捉到正确的尺寸。这种行为发生在 Chrome、FF 和 IE 中。
我意识到我可以设置一个特定的宽度，但我真的很想利用 Foundation 并让它们保持响应。
我已经调整了 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 U.S.from 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 U.S. 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]
]
);
);
【问题讨论】：
老问题，但这个错误是否已解决？我遇到了同样的错误，并尝试了下面列出的解决方案，包括调用highcharts.reflow()，但似乎没有任何效果
【参考方案1】：
请看看这些带有响应式高图的示例：
http://jsbin.com/anuqav/1/edit
http://jsfiddle.net/2gtpA/show/
<div id="container" style="width:100%;margin: 0 auto"></div>
【讨论】：
对于那些使用引导程序的人来说，这可能是最好的解决方案！ 我尝试了这个解决方案，但它对我不起作用。上面的 $(window).resize() 起作用了。我也在使用引导框架。 尽管我有引导程序，但什么也没改变 对我来说很棒！谢谢！【参考方案2】：我从另一个答案中得到了这个，所以给 thegreyspot 点赞in this question。
解决方案：在加载图表后（或填充数据时）调用$(window).resize();
【讨论】：
试过了，它实际上将图形折叠到可用元素的最小宽度。 对我来说它不起作用。而且这不是正确的解决方案：您可以在调整大小事件处理程序中定义不同的操作/行为，有时它们可能执行起来很繁重，或者它们可能会进行 ajax 调用以重新加载数据......不知道......它没有不要让我安定下来。 对我没有任何改变【参考方案3】：这可能会有所帮助：
$(Highcharts.charts).each(function(i,chart)
var height = chart.renderTo.clientHeight;
var width = chart.renderTo.clientWidth;
chart.setSize(width, height);
);
【讨论】：
这段代码会去哪里？我在“加载”事件下添加，没有骰子。请指教。 @JessicaJacobs 在加载回调函数事件中： load: function(event) redrawCharts(); function redrawCharts() $(Highcharts.charts).each(function(i,chart) var height = chart.renderTo.clientHeight; var width = chart.renderTo.clientWidth; chart.setSize(width, height); ); 请注意，使用chart.setSize() 明确设置固定宽度值将“冻结”图表的尺寸，直到您强制执行调整大小事件。您可以在此处使用宽度和高度的百分比值来避免这种情况。
为了只触发调整大小，您现在可以（从 Highcharts v.2.4.6 开始）调用 setSize 函数，使用 2 个空参数来调整包含元素的大小。当异步执行时，它就像一个魅力： setTimeout(function () $(Highcharts.charts).each(function (i, chart) chart.setSize(); ); , 1);
对我没有任何改变【参考方案4】：
现在有点老话题了，但我在 IE8 上遇到了这个问题。在撰写本文时，当前的 IE 版本是 IE10，但我需要使我的网站与早期版本兼容。对我有用的解决方案是上述和其他人们谈论他们实施的解决方案的网站的组合。我进行了 settimeout 和 resize 并刚刚为 IE8 执行，我希望这可以帮助像我这样试图找到解决方案几个小时的人。
您可能会发现只有 script 部分是您唯一需要的部分。
<!--[if IE 8]>
<script src="https://oss.maxcdn.com/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-containerwidth:100% !important; height:100% !important;
</style>
<![endif]-->
【讨论】：
对我没有任何改变【参考方案5】：只需使用chart.reflow() 函数
【讨论】：
至少对我有用。 :) 下次再详细说明你的问题。 这对我来说是唯一可行的答案，谢谢@Adelos 这对我也有用！我在引导网格中使用响应式宽度图表。如果由我决定，我会将其标记为已接受的答案 window.setTimeout(function() chart.reflow(); // $('#container').highcharts().reflow(); 或 ,10);【参考方案6】：$(Highcharts.charts).each(function(i,chart)
var height = chart.renderTo.clientHeight;
var width = chart.renderTo.clientWidth;
chart.setSize(width, height);
);
对我有用
【讨论】：
这只是另一个答案的副本。【参考方案7】：您可以将此代码用于示例
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/
【讨论】：
【参考方案8】：只有这对我有用
$(window).resize(function()
$scope.chartConfig.getChartObj().reflow()
);
【讨论】：
【参考方案9】：只想添加另一个解决方案：
$('.chart').highcharts(options, function(chart)
setTimeout(function()
chart.reflow();
);
);
它的作用是在渲染后的下一帧重新排列图表。
【讨论】：
【参考方案10】：对我来说，它需要一些延迟并触发窗口调整大小。
window.setTimeout(function() $(window).trigger('resize'); , 500);
【讨论】：
对我来说，唯一有效的方法是把它放在我的图表初始化代码window.setTimeout(function() myChart.reflow(); ); 之后，我没有触发调整大小的运气。【参考方案11】：
您可以添加一个事件侦听器，以便您的图表在每次重绘时调整大小：
mychart = new Highcharts.stockChart('div',
chart:
events:
redraw: function(e)
mychart.reflow();
,
【讨论】：
【参考方案12】：在纯 javascript 中，单个页面中的多个图表在调整窗口大小时出现问题
window.onresize = function()
//- Remove empty charts if you are using multiple charts in single page
//- there may be empty charts
Highcharts.charts = Highcharts.charts.filter(function(chart)
return chart !== undefined;
);
Highcharts.charts.forEach(function(chart)
var height = chart.renderTo.chartHeight;
//- If you want to preserve the actual height and only want to update
//- the width comment the above line.
//- var height = chart.chartHeight;
var width = chart.renderTo.clientWidth;
//- The third args is an animation set to true.
chart.setSize(width, height, true);
);
;
我们也需要这个 css 代码
.highcharts-container
width: 100%;
.highcharts-container svg
width: 100%;
display: flex;
【讨论】：
以上是关于在调整窗口大小之前，响应式 Highcharts 无法正确调整大小的主要内容，如果未能解决你的问题，请参考以下文章
使用 JavaScript 更改 Highcharts 的高度。默认情况下，仅在窗口重新调整大小时重新调整大小