Highcharts jQuery representación problema - todos los navegadores

Question

tengo un problema extraño al mismo tiempo tratando de construir un gráfico de columnas apiladas usando Highcharts

Cuando el gráfico hace que, las columnas no se muestran, hasta que, cambiar el tamaño del navegador en de todos modos, haciendo que la tabla se vuelva a dibujar. (Creo)! El resto del gráfico muestra (ejes, títulos, etc.) pero no las columnas en sí.

Obtengo el mismo comportamiento en IE, Firefox y Chrome.

he puesto mi código en jsFiddle - http://jsfiddle.net/gd7bB/173/ de carga hacia arriba y debería ver ningún dato, cambiar el tamaño de la ventana del navegador y "tada", aparecen los datos (en lugar aparecen las columnas)!

Cualquier ayuda sobre este sería enormemente apreciada.

Answer 1

línea Quitar chart.render();

Cuando Highcharts se llama al constructor que no hay necesidad de llamar a render implícita.

Answer 2

que tenían exactamente el mismo problema - Highcharts JS v2.1.5 (2011-06-22) no funciona con jQuery 1.7.1

Después de cambiar a jQuery 1.6.1 (la última versión estable que se utiliza) funcionó. Alguien debería verificar otras versiones de jQuery.

Answer 3

Tuve el mismo problema: después de cargar la página, el gráfico no mostraba las líneas (solo el título y la leyenda). Después de cambiar el tamaño de cualquier navegador o también hacer zoom, el gráfico apareció de repente.

El problema era con jQuery> 1.7 (mi versión ahora es 1.8.2) La actualización de Highcharts a la última versión (v2.3.3 (2012-10-04)) corrigió el problema (y también otros pequeños problemas)

Answer 4

No necesita cambiar ninguna versión de Highcharts o Jquery, si resize() su div-contenedor al final de su secuencia de comandos.

Por ejemplo:

$('#div').resize(); 

Answer 5

Tal vez un poco tarde, pero tuve el mismo problema con jQuery 1.9.1 y no quería rebajar por Highcharts con dotnet.highcharts.

si coloca un nuevo Highchart allí p.

.InitChart(new Chart 
{ 
    DefaultSeriesType = ChartTypes.Line, 
    MarginRight = 130, 
    MarginBottom = 25, 
    ClassName = "chart", 
    Events = new ChartEvents { Load = "function(event) { $(document).resize(); }" } 
    }) ..... 

También puede utilizarlo

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     events: { 
      load: function(event) { 
       //When is chart ready? 
       $(document).resize(); 
      } 
     }   
    }, .. 

. la línea de eventos es lo que se necesita, entonces se procesa la tabla

espero que ayudó, que tenía algunas horas de averiguar cómo funciona :)

Answer 6

Usando jQuery 1.7.2 + Highcharts 3.0.2 el problema se solucionó mediante el uso de:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     events: { 
      load: function(event) { 
       //When is chart ready? 
       $(window).resize(); 
      } 
     }   
    }, .. 

Este es el casi el mismo que @revo, pero utiliza el objeto 'ventana' en lugar de 'documento'.

Answer 7

La solución "no tan delicada" here, es lo que finalmente lo resolvió para mí.

setTimeout(function() { 
       $(window).resize(); 
      }, 0); 

Uso de diagramas con un envoltorio llamado DjangoChartit, con Python Django.