jQuery UI Tabs and Highcharts muestra/problema de renderizado
jquery-ui-tabs (13)
¿Alguna vez alguien usó las pestañas ( jquery-ui-1.8.9 ) y los gráficos circulares de Highcharts 2.1.4 juntos? En pocas palabras, tengo varias pestañas, donde cada pestaña muestra un gráfico circular con datos diferentes. Los gráficos se renderizan a los divs, pero cuando hago clic en la segunda pestaña, el gráfico de alguna manera aparece 300px a la derecha de donde se supone que debe estar. Cada vez que me acerco o me alejo de la ventana del navegador, el gráfico vuelve a la posición de corrección.
Mi código:
// Supongamos que las pestañas numéricas se generan en función de la cuenta de $ de variable, y hay 2 pestañas
<script type="text/javascript">
var chart_tab_<?=count?>;
$(document).ready(function() {
chart_tab_<?=count?> = new Highcharts.Chart({
chart: {
renderTo: ''chart_tab_<?=count?>'',
// blah blah
}
<body>
<div id="chart_tab_<?=count?>"></div>
</body>
Nuevamente, el gráfico se procesa, pero en la segunda pestaña, la pantalla está dañada.
Actualización: Sé que esta CLASE DE soluciona el problema:
<script type="text/javascript">
$(document).ready(function() {
$( "#tabs" ).tabs({
cookie: { expires: 1 }
});
$( "#tabs" ).tabs({
select: function(event, ui) { window.location.reload(); }
});
});
Pero es realmente horrible porque la página se debe volver a cargar cada vez que un usuario hace clic en la pestaña. Cualquier idea sería genial.
El segundo gráfico puede estar desactivado porque parece que está oculto cuando lo dibujas. Trate de dibujar el gráfico sobre la selección.
Aquí hay un pseudo código para darle una idea de lo que imagino. Esto no está probado.
$("#tabs").tabs({
select: function(event, ui) {
var chart = new Highcharts.Chart({
chart: {
renderTo: ui.panel.id,
// blah blah
}
});
}
});
Esta es mi solución (solo probada en Safari y Firefox). Funciona muy bien si desea cargar el gráfico en una pestaña oculta en una página con ancho flexible. La tabla cambia de tamaño si la ventana del navegador cambia de tamaño.
En la configuración del gráfico, establezca el ancho del gráfico desde la pestaña que se abre en la carga de la página (usando jQuery para obtener el ancho):
var chart = new Highcharts.Chart({
chart: {
renderTo: ''container'',
type: ''column'',
width: $(''#tab-1'').width()
},
....
La siguiente función ajusta el ancho si se cambia el tamaño de la ventana del navegador. 500 es la altura. Esto se hace automáticamente si el ancho no se especifica en las opciones del gráfico.
$(window).resize(function() {
chart.setSize($(''#chart_tab'').width(),500);
});
Esto funcionó para mí después de agregar el nombre de la clase (contiene-gráfico) en las pestañas
jQuery(document).on(''shown.bs.tab'', ''a[data-toggle="tab"]'', function (e) { // on tab selection event
jQuery(".contains-chart").each(function () { // target each element with the .contains-chart class
var chart = jQuery(this).highcharts(); // target the chart itself
chart.reflow() // reflow that chart
}
Hola mira mi violín jsfiddle
...
$("#tabs").tabs();
var ids = [''chart-1'', ''chart-2'', ''chart-3''];
for (var i = 0, j = ids.length; i < j; i++) {
if ((container = $(''#''+ids[i])).size()) {
if (container.width()==0) {
container.width(container.actual(''width''));
}
oclone = $.extend({}, options);
oclone.chart.renderTo = ids[i];
new Highcharts.Chart(oclone);
}
}
...
La mejor solución está en la función de devolución de llamada de las pestañas o cuando haga clic en cada pestaña, vuelva a ver el gráfico superior. Míralo:
Chart.reflow y este enlace jsfiddle y también este código que ha agregado en la pestaña de devolución de llamada:
$(''#chart-1'').highcharts().reflow();
Me encontré con el mismo problema, el método reflow () funciona para mí. Capto el gráfico correspondiente accediendo a la variable global de Highcharts. Aquí el orden de los gráficos es el orden de las pestañas.
<script type="text/javascript">
$(function () {
$("#tabs").tabs({
show: function (event, ui) {
var chart = Highcharts.charts[ui.index];
if (chart != null) {
chart.reflow();
}
}
});
});
</script>
Modificación necesaria para que Highcharts funcione en pestañas ocultas de jQuery. De forma predeterminada, jQuery establece display: none en pestañas ocultas, pero con este enfoque, Highcharts no puede obtener el ancho y la altura reales del elemento. Así que, en cambio, lo posicionamos absolutamente y lo alejamos de la ventana gráfica.
<style type="text/css">
.ui-tabs .ui-tabs-hide {
position: absolute;
top: -10000px;
display: block !important;
}
</style>
ejemplo de adición: http://www.highcharts.com/studies/jquery-ui-tabs.htm
Tuve un acordeón jQuery que se estaba abriendo con gráficos confusos ... esta fue mi solución:
Primero se rellenan los gráficos en un global: window.myNamespace.charts. # {container_id}, y luego en mi acordeón hago esto:
$(''#my-accordion'').accordion
...,
change: () ->
chartId = ui.newContent.find(''.highcharts-container'').parent().attr(''id'')
window.myNamespace.charts[chartId].setSize(248,220) if chartId?
lo anterior es un coffeescript, pero debería ser lo suficientemente fácil de traducir ...
Básicamente, estoy llamando a setSize en el gráfico para configurarlo al tamaño que ya tiene ... esto tiene el efecto de limpiar el gráfico después de que se abra ... lo cual admitiré es solo una solución ... lo ideal es que sean cartas altas corrige el error y usa el tamaño que les estoy dando en lugar de intentar calcular el tamaño desde un elemento oculto
Tuve un problema similar en el sentido de que mis gráficos se representaban en el cliente con un ancho cero cada vez que el gráfico estaba en una pestaña que no estaba activada por defecto Esta respuesta fue inspirada por la respuesta de ojreadmore. En lugar de usar el evento preparado para documentos de jQuery para inicializar su alta gráfica, debe usar el evento de activación de su pestaña en el gráfico. Esto tiene la ventaja adicional de hacer la animación de la gráfica elegante cada vez que el usuario hace clic en la pestaña.
En lugar de:
$(document).ready(function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: ''container'',
type: ''bar''
},
title: {
text: ''Fruit Consumption''
},
xAxis: {
categories: [''Apples'', ''Bananas'', ''Oranges'']
},
yAxis: {
title: {
text: ''Fruit eaten''
}
},
series: [{
name: ''Jane'',
data: [1, 0, 4]
}, {
name: ''John'',
data: [5, 7, 3]
}]
});
});
Utilizar:
$(''#tabcontainer'').on(''tabsactivate'', function (event, ui) {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: ''container'',
type: ''bar''
},
title: {
text: ''Fruit Consumption''
},
xAxis: {
categories: [''Apples'', ''Bananas'', ''Oranges'']
},
yAxis: {
title: {
text: ''Fruit eaten''
}
},
series: [{
name: ''Jane'',
data: [1, 0, 4]
}, {
name: ''John'',
data: [5, 7, 3]
}]
});
});
Una solución más pequeña es usar un ancho estático para tus gráficos (si sabes lo que debería ser) en CSS-
.tab-pane { width: 1200px; }
Usted debe activar manualmente el evento de cambio de tamaño
$(window).trigger(''resize'');
agregue class="chart" a todos los contenedores de highcharts dentro de las pestañas.
añade este código jQuery:
jQuery(document).on( ''shown.bs.tab'', ''a[data-toggle="tab"]'', function () {
$( ''.chart'' ).each(function() {
$(this).highcharts().reflow();
});
})
jQuery UI 1.9+ cambió la forma en que las pestañas están ocultas, debes configurar tus propias clases al activar pestañas de esta manera:
$(''#tabs'').tabs({
beforeActivate: function (event, ui) {
$(ui.oldPanel).addClass(''ui-tabs-hide'');
$(ui.newPanel).removeClass(''ui-tabs-hide'');
}
});
Combinado con el siguiente CSS:
.ui-tabs-hide {
display: block !important;
height: 0!important;
width: 0!important;
border:none!important;
}
Esto también solucionará cualquier objeto incrustado de Flash que no se cargue correctamente en pestañas ocultas.