webentwicklung-frage-antwort-db.com.de

JQuery-Renderproblem bei Highcharts - alle Browser

Ich habe ein seltsames Problem beim Versuch, ein gestapeltes Säulendiagramm mit Highcharts zu erstellen. 

Wenn das Diagramm gerendert wird, werden die Spalten werden nicht angezeigt, bis Sie die Größe des Browsers ändern in sowieso, wodurch das Diagramm neu gezeichnet wird. (Ich denke)! Der Rest des Diagramms zeigt (Achsen, Titel usw.), aber nicht die Spalten selbst. 

Ich bekomme das gleiche Verhalten in IE, Firefox und Chrome. 

Ich habe meinen Code auf jsfiddle - http://jsfiddle.net/Gd7bB/173/ Gesetzt. Laden Sie ihn hoch und Sie sollten keine Daten sehen, das Browserfenster und die "tada" -Datengröße ändern erscheint (eher die Spalten erscheinen)! 

Jede Hilfe zu diesem Thema wäre sehr dankbar. 

23
Matt

Linie chart.render(); entfernen 

Wenn der Konstruktor HighCharts aufgerufen wird, müssen Sie render nicht implizit aufrufen.

6
Igor Dymov

Ich hatte genau das gleiche Problem - Highcharts JS v2.1.5 (2011-06-22) funktioniert nicht mit jQuery 1.7.1

Nach dem Wechsel zu jQuery 1.6.1 (der letzten stabilen Version, die ich verwendet habe) hat es funktioniert. Jemand sollte andere Versionen von jQuery überprüfen.

7
Glycerine

Ich hatte das gleiche Problem - nach dem Laden der Seite wurden im Diagramm nicht die Zeilen angezeigt (nur Titel und Legende). Nach einer Größenänderung oder einem Zoomen des Browsers wurde das Diagramm plötzlich angezeigt.

Das Problem war mit jQuery> 1.7 (meine Version ist jetzt 1.8.2) Update der Highcharts auf die neueste Version (v2.3.3 (2012-10-04)) beseitigte das Problem (und auch andere kleine Probleme) )

6
Asped

Sie müssen keine Version von Highcharts oder Jquery ändern, wenn Sie Ihren div-Container am Ende Ihres Skripts resize() verwenden.

Zum Beispiel:

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

Mit jQuery 1.7.2 + HighCharts 3.0.2 wurde das Problem gelöst durch:

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

Dies ist fast das gleiche wie bei @revo, verwendet jedoch das 'window'-Objekt anstelle von' document '.

2
lomantpa

Vielleicht etwas spät, aber ich hatte das gleiche Problem mit jQuery 1.9.1 und wollte es nicht für Highcharts mit dotnet.highcharts herabstufen. 

wenn Sie dort ein neues Highchart z.

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

Sie können es auch verwenden 

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

. Die Ereigniszeile ist das, was Sie brauchen, und Sie rendern Ihr Diagramm

Ich hoffe es hat geholfen, ich hatte einige Stunden Zeit, um herauszufinden, wie es funktioniert :)

1
revo

Die "nicht so heikle" Lösung hier - hat es endlich für mich gelöst.

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

Verwenden von Highcharts mit einem Wrapper namens DjangoChartit mit Python Django.

0
PhoenixDev