Editorbewertungen: Benutzerbewertungen:[Gesamt: 0 Durchschnitt: 0].ilfs_responsive_below_title_1 { width: 300px; } @media(min-width: 500px) {.ilfs_responsive_below_title_1 { width: 300px; } } @media(min-width: 800px) {.ilfs_responsive_below_title_1 { width: 336px; } }
Chartist ist eine kostenlose Open-Source-SVG-Bibliothek zum Erstellen von Diagrammen, die man verwenden kann. Es ist sehr fortschrittlich und unterstützt die Erstellung vieler Diagramme mit vielen Parametern. Damit können Sie farbige Diagramme in beliebiger Größe erstellen und auf Ihrer Website platzieren. Es unterstützt sogar Animationen mit CSS und somit können Sie mit Hilfe dieser Bibliothek animierte Diagramme und Grafiken erstellen.
Beim Erstellen von Dashboards und Webseiten, um irgendeine Art von berichtsbezogenen Daten anzuzeigen, benötigen Sie Diagramme. Oft mussten sie dynamisch oder statisch sein. Dafür gibt es Tools, aber nicht wie Chartist. Das ist wohl einzigartig. Es kommt mit einer sehr detaillierten Dokumentation und sehr guten Beispielen, so dass Sie ziemlich schnell lernen können, Diagramme zu erstellen.
Liste der unterstützten Diagrammtypen von Chartist:
Balkendiagramm (gestapelt und horizontal einschließlich) Liniendiagramm Kreisdiagramm Flächendiagramm Donut-Diagramm Messdiagramm Linienstreudiagramm Animierter SVG-Pfad Bipolares Liniendiagramm Zeitreihen
Merkmale der von Chartist erstellten Diagramme:
Extrem reaktionsschnelle Konfiguration. Beschriftungsplatzierung Mehrzeilige Beschriftungen Überlappende Balken für Mobilgeräte Löcher in Daten CSS-Animation SVG-Animation Erweiterte SMIL-Animationen Plugin-Unterstützung
Wie verwendet man Chartsit zum Generieren von SVG-Diagrammen?
Es gibt mehrere Möglichkeiten, diese Bibliothek zu verwenden. Je nachdem, welche Art von Frontend-Entwickler Sie sind, können Sie es verwenden. Es wird sowohl als Node-Modul als auch als einbettbare Skriptdatei geliefert, die Sie über CDN direkt in HTML bereitstellen können.
Der Einfachheit halber können Sie dies ziemlich einfach in HTML-Dokumenten verwenden. Sie müssen diese Dateien nur in den Abschnitt
Ihrer Website importieren. https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.jsNach dem Linken der Bibliotheken müssen Sie nur noch ein
Fügen Sie nun ein Skript-Tag hinzu, das das Diagramm tatsächlich im angegebenen Container generiert. Das ist eigentlich ganz einfach. Wenn Sie sich sehr gut mit JavaScript auskennen, können Sie die Dokumentation durchgehen, um zu sehen, wie Sie eine benutzerdefinierte erstellen Diagramm. Zu Demozwecken können Sie einfach den folgenden Code verwenden. Fügen Sie es direkt unter dem bereits erstellten
Du bist jetzt fast fertig. Öffnen Sie einfach die HTML-Datei im Browser. Das Diagramm wird jetzt für Sie generiert. Sie können mit dem JS-Code spielen, um ein benutzerdefiniertes Diagramm basierend auf verschiedenen Daten zu erstellen. Außerdem können Sie auf diese Weise eine andere Art von Diagramm erstellen.
Die Dokumentation auf der Hauptwebsite von Chartist ist sehr detailliert. Es enthält viele Beispiele, sogar zum Erstellen animierter Diagramme. Als Frontend-Entwickler müssen Sie diese Dokumentation durchgehen, um ein Diagramm zu erstellen. Und mit etwas Code können Sie sie sogar exportierbar machen.
Abschlussgedanken:
Ich muss sagen, dass Chartist ein Juwel an Werkzeug für Entwickler und Designer ist, um benutzerdefinierte Diagramme zu integrieren Staging sowie Website in Produktion. Es ist sehr einfach und Sie müssen nicht wirklich einen sehr langen Code schreiben, es sei denn, Sie erstellen etwas wirklich Komplexes. Das GitHub-Repository hat bereits mehr als 10.000 Sterne, was an sich schon eine enorme Leistung ist.