Morris JS-Diagramm wird nicht geladen in Twitter Bootstrap Registerkarte Fenster

8

Ich habe ein Morris JS-Diagramm, das versucht, in ein Twitter-Bootstrap-Registerkartenfenster zu laden. Die Registerkarten funktionieren gut, aber das Diagramm wird nicht geladen.

Es sieht so aus, als ob dieser Artikel das Problem behandelt: Ссылка

Wie würde ich ihre Lösung in meinen Rails-Code übersetzen?

Hier ist mein Code:

Anzeigen:

%Vor%

Anwendung.JS

%Vor%

Controllername.js.coffee

%Vor%     
user2270029 01.03.2014, 01:25
quelle

5 Antworten

12

Eine Lösung für ein einzelnes Diagramm auf Registerkarten gefunden, die nicht korrekt angezeigt wurde:

Speichern Sie Ihr Diagramm als Variable:

%Vor%

Dann lauschen Sie den Änderungen auf den Registerkarten und zeichnen Sie das Diagramm neu:

%Vor%

Ich hoffe, das hilft jemand anderem.

    
tmartin314 02.12.2014 22:57
quelle
1

Die oberste Antwort ist teilweise korrekt. Das Problem ist jedoch, dass der SVG nicht in der Größe geändert wird. Um sicherzustellen, dass die Größe der SVG geändert wird, können Sie sie mit CSS ändern:

%Vor%     
Donato 11.07.2016 17:49
quelle
0

Zuerst möchten Sie überprüfen, ob Sie die richtige Version von morris.js verwenden, der aktuelle Masterzweig auf github hat die Funktion redraw ().

Zweitens: Stellen Sie sicher, dass Sie in der Lage sind, ein Diagramm in der Domäne zu drucken, beispielsweise auf der ersten aktiven Registerkarte.

Drittens: Fügen Sie ein weiteres Diagrammelement auf einer Registerkarte hinzu, die nicht aktiv ist, fügen Sie Datenidentifikatoren für jede Registerkarte hinzu, um mehrere Diagramme neu zeichnen zu können, indem Sie Folgendes verwenden:

%Vor%

Diese js wird bestimmen, welche Datenidentifikatoren betroffen sind, wenn eine Registerkarte "angezeigt" wird, Sie können mehrere Grafikelemente haben, die zum Beispiel durch Kommas getrennt sind. Es nimmt dann den Wert / die Werte des Bezeichners an, der offensichtlich mit Ihren Diagrammelementen übereinstimmt und die Funktion redraw () für sie aufruft.

Ich sehe keine Notwendigkeit, es rägerischer als das dafür zu machen, man könnte natürlich immer zu coffeescript konvertieren, aber das sollte funktionieren.

    
rbsthlm 04.03.2014 08:56
quelle
0

Dieser Code funktioniert für mich, versuchen Sie es, wenn Sie mehrere Diagramme auf einer Registerkarte haben:

%Vor%     
Juan Luis Perez Alvarez 23.03.2015 22:19
quelle
0

Ich hatte genau das gleiche Problem, aber in meinem Fall funktionierte keine der obigen Lösungen.

Was für mich funktionierte, war stattdessen die jquery ui tabs ( link ). Diese funktionierten wie ein Zauber.

Ihr Code müsste nur geringfügig neu geschrieben werden. Anstelle von

%Vor%

schreiben:

%Vor%

Und dann fügen Sie einfach dieses Skript hinzu:

%Vor%

Ich hoffe, das hilft.

Übrigens, alle Fiddles, die ich gefunden habe und die versuchen, das Ereignis 'shown.bs.tab' zu fangen, funktionieren aus irgendeinem Grund nicht mehr.

    
Hugo Nava Kopp 02.03.2016 19:50
quelle