SVG-Diagrammbibliotheken

Es mangelt nicht an Optionen bei Diagrammbibliotheken im Web. Das ist gut! Wettbewerb ist gut für die Verbraucher. Er hält die Qualität hoch. Das stimmt hier definitiv. Die Landschaft der Diagrammbibliotheken ist ziemlich beeindruckend und reicht von gut und kostenlos bis hin zu exzellent und kostenpflichtig.

Wir beschränken die hier vorgestellten Optionen speziell auf SVG-Diagramme. Ich denke, SVG ist eine ausgezeichnete Wahl für Diagramme, weil

Es sieht in jeder Größe scharf aus
Es lässt sich leicht stylen
Es kann interaktiv sein
Und es kann ziemlich barrierefrei gestaltet werden.

Im Allgemeinen halte ich SVG für die beste Wahl für Diagramme, aber es ist nicht die einzige Option. Es gibt Tools, um flache Rastergrafiken aus Diagrammdaten zu erstellen. Es gibt <canvas>-Diagrammoptionen. Man könnte sogar ein einfaches Diagramm aus HTML-Elementen erstellen.

Frühe Überlegungen

Bei der Auswahl einer Bibliothek gibt es eine Reihe von Aspekten zu beachten. Vieles davon ist ziemlich offensichtlich. Ich möchte Sie hauptsächlich daran erinnern, dass es viele Überlegungen gibt, daher lohnt es sich, eine Vielzahl von Lösungen zu betrachten.

Kostenpflichtig oder kostenlos? Manche Leute haben riesige Budgets und zahlen lieber für Software. Für andere ist kostenlos die einzige Option.
Open Source oder nicht? Ist die Lizenz mit dem, was Sie erstellen, kompatibel? Ist das, was Sie erstellen, auch Open Source und kompatibel (oder nicht)? Verteilen Sie das Erstellte weiter, z. B. ein Theme? Erstellen Sie etwas Kommerzielles? Was sind die Namensnennungsanforderungen?
Was ist der Funktionsumfang? Benötigen Sie nur einen Diagrammtyp? Mehrere Typen? Welche sind das? Hoffen Sie, dass eine einzige Bibliothek bei anderen Diagrammbedürfnissen wie Aktien oder Karten helfen kann?
Was sind die Abhängigkeiten? Es gibt Bibliotheken, die jQuery benötigen. Häufiger wird eine SVG-Bibliothek wie D3 benötigt. Einige haben keine Abhängigkeiten.
Welche Art von Support ist verfügbar? Ist er beim Kauf enthalten? Können Sie ihn als Add-on kaufen? Benötigen Sie ihn überhaupt? Sieht das Open-Source-Repository so aus, als ob dort Hilfe angeboten wird?
Wurde es für ein Framework entwickelt? Einige dieser Optionen sind speziell für Frameworks wie React, Angular oder Embed gedacht. Sicherlich gibt es auch Optionen, die für CMS oder speziell für die Datenausgabe bestimmter Backend-Sprachen entwickelt wurden.
Wie ist die Dokumentation? Gibt es viele Beispiele? Wie lesbar sind sie?
Welche anderen Funktionen benötigen Sie? Erwarten Ihre Benutzer, dass sie diese drucken können? Die Daten exportieren? Mit ihnen interagieren? Sie anpassen?
Wie funktioniert das Theming? Benötigen Sie, dass sie mit schönen Themes geliefert werden? Planen Sie, sie selbst zu gestalten?

Es gibt viel nachzudenken!

Die Liste!

Sie ist höchstwahrscheinlich unvollständig. Wenn es SVG-ausgebende Diagrammbibliotheken gibt, die ich übersehen habe, posten Sie sie in die Kommentare!

Ich werde nicht zu jeder einzelnen viel Kommentar abgeben. Die Liste der Überlegungen ist so tiefgreifend und variabel, es liegt wirklich an Ihnen, diese zu prüfen und eine Wahl zu treffen. Ich werde hier einige Screenshots machen, um einige Dinge zu zeigen, die jede Bibliothek zu bieten hat, sowie eine Live-Demo (wenn ich eine finden kann). Dies zeigt nicht umfassend, wozu jede in der Lage ist, es ist nur ein Vorgeschmack.

amCharts

Sehen Sie den Pen
Verwenden von SVG-Filtern mit amCharts von amCharts (@amcharts)
auf CodePen.

Highcharts

Sehen Sie den Pen
Highchart Javascript Integration von Benjamin Cassinat (@benftwc)
auf CodePen.

Zingchart

FusionCharts

Sehen Sie den Pen
Rad Charts mit Fusion Charts von Chris Vasquez (@cvasquez)
auf CodePen.

uvCharts

Contour

CHARTIST.JS

Sehen Sie den Pen
Arbeiten mit Chartist und Animationen von Sarah Drasner (@sdras)
auf CodePen.

n3-charts

Sehen Sie den Pen
n3-Charts von Jim Gibbs (@jimgibbs)
auf CodePen.

Ember charts

React SVG chart

Optionen, die <canvas> verwenden

Es gibt eine ganze Reihe von Optionen, die speziell auf <canvas> ausgeben, wie z. B. Chart.js.

Ich bin viel mehr an <svg> interessiert, aber wenn Sie einen guten Grund haben, Canvas zu wählen, hier sind einige andere

Viel Glück! Und lassen Sie uns wissen, wenn Sie mit einer dieser Optionen besondere Erfolge erzielt haben.