example - highcharts yaxis line

Highcharts: los gráficos ocultos no cambian de tamaño correctamente

Question

Actualmente tengo una página de 3 pestañas. Cada pestaña es un div que está configurado para display: hidden cuando no está seleccionado. En estas pestañas tengo un sistema Grid creado con Susy (plugin brújula). Además, cada página de pestañas tiene un conjunto de Highcharts. Cuando cargo la página, dependiendo de qué pestaña se encuentre en la URL, se carga una de las pestañas. Todos los gráficos se ven bien, sin embargo, cuando cambio a una pestaña diferente, algunos de los gráficos no se ajustan correctamente en su div. Si acabo de cambiar el tamaño de la ventana, los gráficos se vuelven a calcular y luego se ajustan perfectamente. O si vuelvo a cargar esa misma pestaña, las tablas se ajustan bien también. ¿Puedo llamar a una función que cambiará el tamaño de todos los cuadros en la página cuando realizo el cambio de pestaña?

Se parece a esto:

cuando debería verse así:

EDITAR: Parece que esto no es un problema directamente relacionado con los Highcharts, por ejemplo, mis google maps se ven así:

pero cuando cambio el tamaño de la ventana, se ajusta correctamente:

¿Puedo hacer que CSS actualice / ajuste mis cuadrículas mediante una llamada a función en JS cuando se cambia la pestaña?

Answer 1

Lo que funcionó para mí es llamar:

$(window).resize();

Cuando cargo una nueva pestaña. Todavía tiene problemas con la API de Google Maps, pero funciona muy bien con Highcharts.

Answer 2

/**
* Adjust size for hidden charts
* @param chart highcharts
*/
function adjustGraph(chart) {
try {
if (typeof (chart === ''undefined'' || chart === null) && this instanceof jQuery) { // if no obj chart and the context is set
this.find(''.chart-container:visible'').each(function () { // for only visible charts container in the curent context
$container = $(this); // context container
$container.find(''div[id^="chart-"]'').each(function () { // for only chart
$chart = $(this).highcharts(); // cast from JQuery to highcharts obj
$chart.setSize($container.width(), $chart.chartHeight, doAnimation = true); // adjust chart size with animation transition
});
});
} else {
chart.setSize($(''.chart-container:visible'').width(), chart.chartHeight, doAnimation = true); // if chart is set, adjust
}
}
catch (err) {
// do nothing
}
}

uso

$(window).resize(function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
// resizeEnd call function with pass context body
adjustGraph.call($(''body''));
}, 500);
});

para la pestaña de arranque

$(''a[data-toggle="tab"]'').on(''shown.bs.tab'', function (e) {
var isChart = $(this).attr(''data-chart'');
var target = $(this).attr(''href'');
if (isChart) {
// call functio inside context target
adjustGraph.call($(target));
}
});
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">
<a href="#anagrafica" data-toggle="tab"><h5>Anagrafica</h5></a>
</li>
<li>
<a href="#consumi" data-toggle="tab" data-chart="1"><h5>Consumi</h5></a>
</li>
</ul>

en la tabla

new Highcharts.Chart({
chart: {
renderTo: ''chart-bar'',
defaultSeriesType: ''column'',
zoomType: ''xy'',
backgroundColor: null,
events: {
load: function (event) {
adjustGraph(this);
}
}
},

código HTML

div class="tab-pane" id="charts">
<div class="row-fluid">
<div class="span6 offset3">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner chart-container">
<div class="active item">
<h3>Chart 1/h3>
<div id="bar-pod-annuale">
<div id="chart-bar" style="width:100%;margin: 0 auto"></div>
</div>
</div>
<div class="item">
<h3>Char 2</h3>
/** chart **/
</div>
<div class="item">
<h3>Char 3</h3>
/** chart **/
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>

Ver en jsfiddle http://jsfiddle.net/davide_vallicella/LuxFd/2/

Answer 3

Encontrará muchos problemas cuando intente renderizar las cosas que comienzan con "display: none". Si bien $ (window) .resize () podría funcionar en muchos casos, le sugiero que intente primero mostrar su página antes de mostrarla: ninguna entra en vigencia. Una posible solución sería establecer opacidad: 0 o visibilidad: oculta.

El atributo de visualización es lo que controla cómo se representará su elemento, por ejemplo, bloque (100% de ancho) o en línea (ajuste de contenido). Cuando un elemento tiene display: none, lo sobrescribe, eliminando finalmente su ancho y alto efectivo hasta que ese elemento recibe un tipo de bloque.

Aquí hay un ejemplo para demostrar: http://jsfiddle.net/m2f3scmm/3/

<div id="log1" style="display: none;">
</div>
<div id="log2" style="visibility: hidden;">
</div>
<div id="log3" style="opacity: 0">
</div>

Cuando utilizas el hack de "cambio de tamaño", estás asumiendo que el complemento o la secuencia de comandos que estás usando es vinculante para el evento de cambio de tamaño de la ventana, que no siempre es el caso. Disparar el tamaño de la ventana también podría ralentizar el renderizado o causar efectos no deseados (por ejemplo, los pequeños diagramas de animación cuando se procesa por primera vez, lo que parece poco convincente cuando ocurre cada vez que se cambia una pestaña).