highcharts hide title
Los gráficos de Highcharts no cambian de tamaño correctamente en el tamaño de la ventana (3)
Tengo 2 gráficos de lado a lado en mi página, y me gustaría cambiarles el tamaño cuando se cambie el tamaño de la ventana: su contenedor está configurado al 50% de ancho, que, según los ejemplos, debería ser suficiente.
Puede encontrar un ejemplo práctico de redimensionamiento automático de la tabla en http://jsfiddle.net/2gtpA/
Se puede ver un ejemplo que no funcionó para reproducir el problema en http://jsfiddle.net/4rrZw/2/
NOTA : tiene que cambiar el tamaño del marco varias veces para reproducir el problema (más pequeño> más grande> más pequeño debería hacer)
Creo que todo radica en la forma en que declara los contenedores ... pegar el código HTML como el código JS para highcharts no parece ser relevante aquí ... (igual en ambos ejemplos)
<table style="width:100%;">
<tr>
<td style="width:50%;">
<div id="container" style="height: 50%"></div>
</td>
<td style="width:50%;"></td>
</tr>
</table>
Puede evitar usar javascript para realizar el cambio de tamaño y confiar en css en su lugar. Esto se puede lograr al convertir el HighChart en un div que tiene:
position: absolute;
width: 100%;
Para asegurarte de que la altura del contenedor sea la adecuada, deberás envolver este elemento absolutamente posicionado en otro elemento que haya establecido explícitamente la altura:
position: relative;
width: 100%;
height: 400px;
Al representar el HighChart en un elemento de posición absoluta, el gráfico responderá a las reducciones de ancho en el padre.
Tuve tu fiddle a una solución funcional @ http://jsfiddle.net/AxyNp/ El fragmento de código más importante de aquí es este:
$(window).resize(function() {
height = chart.height
width = $("#chartRow").width() / 2
chart.setSize(width, height, doAnimation = true);
});
La solución tiene que ver con la respuesta de this post de SO.
Parece que lo mejor que puede hacer para redimensionar correctamente el contenedor (y la celda) del gráfico es confiar en su propio activador de redimensionamiento. Tenga en cuenta que establezco el reflujo a "falso" en las opciones del gráfico para eliminar el activador existente.
/**
* 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 bootstrap
$(''a[data-toggle="tab"]'').on(''shown.bs.tab'', function (e) {
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 el gráfico
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>
</div>