Hallo Ich habe ein Problem mit Highstocks bei der Verwendung von jquery Tabs.
Dies ist der Code für den Konstruktor.
%Vor%Der Container hat nur die halbe Breite der ganzen Seite.
Wenn die Seite in die Registerkarte geladen wird, die das Diagramm enthält, wird ihre Breite korrekt wiedergegeben. Wenn die Seite jedoch zuerst auf eine andere Registerkarte geladen wird, erstreckt sich ihre Breite über die gesamte Breite der Seite und überschneidet sich mit anderen Dingen auf der Seite. Daher muss die Seite aktualisiert werden, um dies zu beheben.
Hat jemand dafür eine Lösung?
Highcharts legt die Breite des Diagramms auf die Breite des enthaltenden Elements fest. Wenn also das enthaltene Element ausgeblendet ist, kann es keine Breite erhalten.
Um das Problem zu beheben, können Sie bei der Initialisierung Ihres Diagramms die Option width festlegen:
%Vor%Wenn Sie das Diagramm nicht auf die richtige Breite einstellen können, habe ich diesen Trick verwendet, um die Breite eines versteckten Elements zu erhalten:
jQuery: Hole die Höhe des versteckten Elements in jQuery
Hoffe, das hilft.
Ich weiß, das ist eine lange Zeit, nachdem Sie Ihre Frage gestellt haben, aber ich hatte ein ähnliches Problem, da meine Diagramme auf dem Client mit der Breite null gerendert wurden, wenn das Diagramm auf einer Registerkarte war, die nicht standardmäßig aktiviert war. Dies liegt daran, dass Highcharts, wie @brent angibt, die Breite des übergeordneten Elements verwendet, und ab jQuery UI 1.9 verwendet das Registerkarten-Widget einen Inline-Stil von display: none , um die inaktiven Registerkarten auszublenden.
Anstatt das document ready-Ereignis von jQuery zu verwenden, um Ihr Highchart zu initialisieren, sollten Sie stattdessen das activate-Ereignis auf der Registerkarte verwenden, auf der sich Ihr Diagramm befindet. Dies hat den zusätzlichen Vorteil, dass Sie jedes Mal, wenn der Benutzer auf die Registerkarte klickt, die Snazzy-Diagrammanimation durchführt.
Anstelle von:
%Vor%Verwenden:
%Vor%Sie können die Breite des Container-Divs des Diagramms mit einem Prozentwert festlegen.
So etwas sollte funktionieren.
%Vor%Hoffe, das hilft.
Ersetzen Sie in Ihrem Stylesheet die Regel für den Klassenselektor ".ui-tabs .ui-tabs-hide" mit
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
Lösung entnommen aus: jQuery UI - Tabs
Tags und Links highcharts highstock jquery-tabs