documentacion - Los Highcharts receptivos no se dimensionan correctamente hasta que el tamaño de la ventana
highstock destroy (10)
Estoy usando Highcharts dentro del marco de Zurb''s Foundation para un proyecto de clase. Tengo tres cuadros dentro de una pestaña de sección. Uno está dentro de un divisor de 12 columnas, los otros dos están en la misma fila dentro de divs de 6 columnas.
Cuando se carga la página, el gráfico presentado no ocupa el ancho disponible de las 12 columnas, y los dos gráficos más pequeños desbordan sus 6 columnas. Sin embargo, cuando se cambia el tamaño de la ventana o trato de investigar utilizando el elemento Inspeccionar, los cuadros inmediatamente se ajustan a las dimensiones correctas. Este comportamiento se produce en Chrome, FF e IE.
Me doy cuenta de que podría establecer un ancho específico, pero realmente me gustaría aprovechar Foundation y mantenerlos receptivos.
He modificado las inicializaciones de CSS y Highcharts, pero estoy perplejo. ¿Alguien más ha tenido este problema? ¿Alguien puede ver lo que me estoy perdiendo?
Aquí hay un extracto de mi 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-->
Aquí está el 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]
}]
});
});
Ahora es un tema viejo, pero tuve este problema con IE8. La versión actual de IE en el momento de escribir esto es IE10, pero necesitaba que mi sitio fuera compatible con versiones anteriores. La solución que funcionó para mí fue una combinación de los anteriores y otros sitios donde las personas hablaron sobre la solución que implementaron. Fui a un settimeout más un cambio de tamaño y acabo de ejecutar para IE8, espero que esto ayude a alguien más como yo que trató de encontrar una solución durante unas horas.
Puede encontrar que solo la sección del script es la única sección que necesita.
<!--[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-container{width:100% !important; height:100% !important;}
</style>
<![endif]-->
Esto podría ayudar:
$(Highcharts.charts).each(function(i,chart){
var height = chart.renderTo.clientHeight;
var width = chart.renderTo.clientWidth;
chart.setSize(width, height);
});
Obtuve esto de otra respuesta, así que dale crédito al greyspot en esta pregunta .
solución: llame a $(window).resize(); después de cargar el gráfico (o cuando lo llene con datos)
Por favor, eche un vistazo a estos ejemplos con Highcharts receptivos:
http://jsbin.com/anuqav/1/edit
http://jsfiddle.net/2gtpA/show/
<div id="container" style="width:100%;margin: 0 auto"></div>
Puedes usar este código para el ejemplo
var chart;
$(function() {
var newh = $("#container").height();
$( window ).resize(function() {
newh = $("#container").height();
chart.redraw();
chart.reflow();
});
chart = new Highcharts.Chart();
})
Solo quiero agregar otra solución:
$(''.chart'').highcharts(options, function(chart) {
setTimeout(function() {
chart.reflow();
});
});
Lo que hace es volver a dibujar el gráfico en el siguiente cuadro una vez que se ha procesado.
Solo usa la función chart.reflow()
para mí, necesitaba demorar un poco y disparar el tamaño de la ventana.
window.setTimeout(function(){ $(window).trigger(''resize''); }, 500);
solo esto funcionó para mí
$(window).resize(function(){
$scope.chartConfig.getChartObj().reflow()
});
$(Highcharts.charts).each(function(i,chart){
var height = chart.renderTo.clientHeight;
var width = chart.renderTo.clientWidth;
chart.setSize(width, height);
});
esto funciona para mi