Bootstrap 3 Tabs & Chart.js - Diagramme werden nicht auf Tabs geladen
Ich verwende Bootstrap 3-Registerkarten für Seitenlayouts und Chart.js , um Donut-Diagramme für ein Projekt zu erstellen.
Die Diagramme werden jedoch nicht geladen, wenn Sie auf eine Registerkarte mit einem Diagramm wechseln. Manchmal werden sie geladen, wenn Sie Elemente in google chrome untersuchen. Sie scheinen nur zu rendern, wenn sie auf der ersten sichtbaren Registerkarte geladen sind.
Es gibt einen bekannten Fehler mit dem chart.js-Javascript in der Chrome-Konsole:
Uncaught IndexSizeError: Fehler beim Ausführen von 'arc' auf 'CanvasRenderingContext2D': Der angegebene Radius (-0.5) ist negativ.
Und ich denke, das liegt daran, dass Bootstrap die Sichtbarkeit der Registerkarten auf "none" gesetzt hat und daher das Diagramm nicht richtig dargestellt wird oder etwas ...
Es sollte so aussehen:
Hat jemand anderes dieses Problem & amp; wenn ja; Gibt es einen Workaround?
... Oder sollte ich nach einem anderen Diagrammskript suchen, das gut mit den Bootstrap-Registerkarten funktioniert?
Vielen Dank im Voraus:)
5 Antworten
Für mich ist die Lösung tot einfach. Aktualisieren Sie die Chart.Arc Funktion wie folgt mit dem neusten Commit:
%Vor%});
Zu beachten ist der ternäre Operator am inneren und äußeren Radius, um negative Werte zu vermeiden. Dies wirkte auf meinem Projekt wie ein Zauber. Charts waren weiterhin reaktionsfreudig und es gab KEINE schädlichen Effekte durch Umwandlung der Radien in natürliche Zahlen (dh: positiv)
Da der Ursprung dieses Problems keine Tab-Inhalte im Bootstrap anzeigt, habe ich das mit einem kleinen CSS-Hack gelöst.
%Vor%Ich habe eine eher einfache und etwas faule Option gefunden. Sie können alle Ihre Registerkarten auf "Registerkarten aktiv" setzen. Auf diese Weise werden alle Ihre Diagramme auf den Registerkarten angezeigt und gerendert, dann
%Vor%Tags und Links javascript twitter-bootstrap twitter-bootstrap-3 chart.js