Highcharts jQuery renderowania problemu - wszystkie przeglądarki

Question

Mam dziwny problem próbując zbudować wykres skumulowany kolumnowy używając Highcharts

Gdy wykres świadczy, kolumny nie są wyświetlane, aż zmiany rozmiaru w przeglądarkę w każdym razie, powodując ponowne rysowanie wykresu. (Myślę)! Reszta wyświetleń wykresu (oś, tytuły itp.), Ale nie same kolumny.

Podobne zachowanie występuje w IE, Firefox i chrome.

Położyłem mój kod na jsfiddle - http://jsfiddle.net/gd7bB/173/ Załaduj go i nie powinieneś widzieć żadnych danych, zmień rozmiar okna przeglądarki i "tada", dane pojawią się (raczej kolumny pojawiają się)!

Każda pomoc w tej sprawie byłaby ogromnie doceniana.

Answer 1

Usuń linia chart.render();

Kiedy HighCharts konstruktor nazywa nie ma potrzeby, aby zadzwonić render niejawnie.

Answer 2

miałem dokładnie ten sam problem - Highcharts JS v2.1.5 (2011-06-22) nie działa z jQuery 1.7.1

Po zmianie do jQuery 1.6.1 (Ostatnim stabilnym wydaniem użyłem) zadziałało. Ktoś powinien sprawdzić inne wersje jQuery.

Answer 3

Miałem ten sam problem - po wczytaniu strony na wykresie nie wyświetlano linii (tylko tytuł i legenda). Po zmianie rozmiaru lub powiększeniu przeglądarki wykres nagle pojawił się.

Problem polegał na tym, że jQuery> 1.7 (moja wersja to 1.8.2) Zaktualizowanie Highcharts do najnowszej wersji (v2.3.3 (2012-10-04)) naprawiło problem (a także inne drobne problemy)

Answer 4

Nie musisz zmieniać żadnej wersji Highcharts lub Jquery, jeśli masz resize() swój div-kontener na końcu skryptu.

Na przykład:

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

Answer 5

Może trochę późno, ale miałem ten sam problem z jQuery 1.9.1 i nie chce, aby obniżyć go do Highcharts z dotnet.highcharts.

jeśli stworzysz tam nowy Highchart np.

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

Można również go

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

użyciu. linia wydarzenia jest to, czego potrzebujesz wtedy czyni Twój wykres

Mam nadzieję, że to pomogło, miałem kilka godzin, aby dowiedzieć się, jak to działa :)

Answer 6

jQuery 1.7.2 + HighCharts 3.0.2 problem został rozwiązany za pomocą:

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

To jest prawie taki sam jak @revo, ale korzysta z obiektu „okno” zamiast „dokument”.

Answer 7

"Nie tak delikatne" rozwiązanie here, jest tym, co ostatecznie rozwiązało to dla mnie.

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

Korzystanie z highcharts z opakowaniem o nazwie DjangoChartit, z Python Django.