HTML-Grafik nach Punkten bereit. Überblick über Javascript-Bibliotheken zum Plotten. jQuery mit Mausrad-Scroll-Effekt

Übersetzung

Diagramme und Grafiken sind aus einem Dashboard kaum noch wegzudenken. Sie zeigen komplexe statistische Daten schnell und effizient an. Darüber hinaus verbessert ein gutes Diagramm auch das Gesamtdesign Ihrer Website.

In diesem Artikel zeige ich Ihnen einige der besten JavaScript-Bibliotheken zum Erstellen von Diagrammen/Diagrammen (und Pivot-Tabellen). Diese Bibliotheken helfen Ihnen, schöne und anpassbare Diagramme für Ihre zukünftigen Projekte zu erstellen.

Obwohl die meisten Bibliotheken kostenlos und Open Source sind, haben einige von ihnen kostenpflichtige Versionen mit zusätzlichen Funktionen.

D3.js - Datenorientierte Dokumente

Wenn wir heute an Graphen denken, fällt uns als Erstes D3.js ein. Da es sich um ein Open-Source-Projekt handelt, bietet D3.js zweifellos viele nützliche Funktionen, die den meisten vorhandenen Bibliotheken fehlen. Funktionen wie "Enter and Exit", leistungsstarke Übergänge und eine jQuery- oder Prototype-ähnliche Syntax machen es zu einer der besten JavaScript-Bibliotheken zum Erstellen von Grafiken und Diagrammen. In D3.js werden sie mit HTML, SVG und CSS generiert.

Im Gegensatz zu vielen anderen JavaScript-Bibliotheken verfügt D3.js nicht über vorgefertigte Diagramme, die sofort einsatzbereit sind. Sie können sich jedoch die Liste der mit D3.js erstellten Diagramme ansehen, um sich einen allgemeinen Überblick zu verschaffen.

D3.js funktioniert nicht richtig mit älteren Browsern wie IE8. Sie können jedoch jederzeit Plugins wie das aight-Plugin für die Cross-Browser-Kompatibilität verwenden.

D3.js wurde häufig auf Websites wie NYTimes, Uber und Weather.com verwendet.

Google-Diagramme

Google Charts ist eine JavaScript-Bibliothek, die ich regelmäßig verwende, um einfache und einfache Diagramme zu erstellen. Bietet eine Vielzahl vorgefertigter Diagramme wie Kombi-Balkendiagramme, Balkendiagramme, Kalenderplots, Tortendiagramme, Geoschemen und mehr.

Google Charts hat auch viele Konfigurationseinstellungen, die Ihnen beim Ändern helfen Aussehen Grafik. Diagramme werden mit HTML5/SVG generiert, um browserübergreifende Kompatibilität und plattformübergreifende Portabilität auf iPhone, iPad und Android zu gewährleisten. Enthält auch VML zur Unterstützung älterer IE-Versionen.

HighchartsJS

Highcharts JS ist eine weitere sehr beliebte Diagrammbibliothek. Es enthält viele Animationen verschiedener Art, die viel Aufmerksamkeit auf Ihre Website lenken können. Wie andere Bibliotheken enthält HighchartsJS viele vorgefertigte Diagramme: Spline, Curly, Combined, Bar, Histogram, Pie, Scatter usw.

Einer der größten Vorteile der Verwendung von HighchartsJS ist die Kompatibilität mit älteren Browsern wie z Internet Explorer 6. Standardbrowser verwenden SVG zum Rendern von Diagrammen. Im Legacy-IE werden Grafiken über VML erstellt.

Obwohl HighchartsJS kostenlos ist persönlichen Gebrauch, müssen Sie eine Lizenz für die kommerzielle Nutzung erwerben.

Fusionsdiagramme

Fusioncharts ist eine der älteren JavaScript-Bibliotheken, die erstmals 2002 veröffentlicht wurde. Diagramme werden mit HTML5/SVG und VML für bessere Portabilität und Kompatibilität generiert.

Im Gegensatz zu vielen Bibliotheken bietet Fusioncharts die Möglichkeit, sowohl JSON-Daten als auch XML zu parsen. Sie können diese Grafiken auch in 3 verschiedenen Formaten exportieren: PNG, JPG und PDF.

Fusioncharts ist hochkompatibel mit älteren Browsern wie IE6. Aus diesem Grund ist es in vielen Handelsorganisationen zu einer der beliebtesten Bibliotheken geworden.

Sie können die mit Wasserzeichen versehene Version von Fusioncharts sowohl in persönlichen als auch in kommerziellen Projekten kostenlos verwenden. Sie müssen jedoch eine Lizenz erwerben, um das Wasserzeichen loszuwerden.

Flotte

Flot ist eine JavaScript-Bibliothek für jQuery, mit der Sie Grafiken/Diagramme erstellen können. Eine der ältesten und beliebtesten Diagrammbibliotheken.

Flot unterstützt Balkendiagramme, Streudiagramme, Balkendiagramme, Säulendiagramme und jede Kombination dieser Diagrammtypen. Auch kompatibel mit älteren Browsern wie IE 6 und Firefox 2.

Flot ist völlig kostenlos, kommerzieller Support ist auf spezielle Anfrage an den Entwickler erhältlich. Hier ist eine Liste von Diagrammbeispielen, die mit Flot erstellt wurden.

amCharts

amCharts ist zweifellos eine der schönsten Diagrammbibliotheken, die es gibt. Es ist vollständig in 3 unabhängige Typen unterteilt: JavaScript-Charts, Maps-Charts (amMaps) und Aktiencharts.

AmMaps ist mein Favorit der drei oben genannten. Bietet Funktionen wie Heatmaps, Zeichnen von Linien, Hinzufügen von Text zur Karte, Hochladen von Symbolen oder Fotos oben auf Ihrer Karte, Zoomen und mehr.
amCharts verwendet SVG zum Rendern von Diagrammen, was nur in modernen Browsern funktioniert. Diagramme werden in IE unter Version 9 möglicherweise nicht korrekt angezeigt.

EJS Chart ist in kostenlosen und kostenpflichtigen Versionen verfügbar. Freie Version hat eine Einschränkung, die es Ihnen nicht erlaubt, mehr als 1 Diagramm pro Seite und mehr als zwei (numerische) Sequenzen pro Diagramm zu verwenden. Überprüfen Sie die Preisdetails.

uvCharts

uvCharts ist eine Open-Source-JavaScript-Bibliothek. Quellcode, behauptet, über 100 Konfigurationsoptionen zu haben. Es hat Diagramme für 12 verschiedene Standards direkt aus der Box.

UvCharts basiert auf der D3.js-Bibliothek. Dieses Projekt verspricht, alle komplexen Nuancen der D3.js-Codierung zu eliminieren und eine einfache Implementierung von Standardansichtsdiagrammen bereitzustellen. uvCharts wird mit SVG, HTML und CSS generiert.

Fazit

Jetzt liegt die Wahl der besten Diagrammbibliothek für Ihre zukünftigen Projekte bei Ihnen. Entwickler, die die volle Kontrolle über Diagramme haben möchten, werden sich definitiv für D3.js entscheiden. Fast alle der oben genannten Bibliotheken werden in den Stackoverflow-Foren gut unterstützt.

Ich hoffe, Ihnen hat dieser Artikel gefallen. Einen schönen Tag noch.

Tags: Tags hinzufügen

Wlad Merschewitsch

Auf Websites müssen Sie manchmal verschiedene Diagramme verwenden, mit denen Sie dem Benutzer Daten klar und einfach vermitteln können. Früher wurden solche Diagramme in Excel erstellt und dann als Bild in die Site eingefügt. Aber wir leben in einem Jahrhundert Informationstechnologien, also möchte ich ein Diagramm schnell, einfach und sogar so einfügen, dass es interaktiv und schön zugleich ist. Und dann kam Google und hat uns so einen Service geboten.

Eine Reihe möglicher Diagramme ist auf dieser Seite verfügbar. Für jede Grafik gibt es viele Optionen, mit denen Sie alles nach Ihren Wünschen anpassen können: Farben, Position, Titel, Animationen und vieles mehr. Sie können mit einem minimalen Set auskommen, wenn Sie nicht auf diese Feinheiten eingehen möchten oder wenn Sie mit der Standardansicht des Charts vollkommen zufrieden sind.

Ich werde nur zwei Arten von Diagrammen betrachten - ein Kreisdiagramm und ein Liniendiagramm. Die anderen Typen sind analog verbunden, und nachdem Sie herausgefunden haben, wie Sie ein Diagramm hinzufügen können, ist es bereits einfacher, mit anderen zu arbeiten.

Kuchendiagramm

Ein solches Diagramm ähnelt einem Kuchen, der in Stücke unterschiedlicher Größe geschnitten wird. Die Gesamtsumme aller Teile ist 100%, die Teile teilen den Kreis proportional zu ihren Werten.

Beispiel 1 zeigt den Code zur Darstellung der Luftzusammensetzung als Tortendiagramm.

Beispiel 1: Tortendiagramm

Kuchendiagramm

Das Ergebnis des Beispiels ist in Abb. eines.

Reis. 1. Ansicht des Tortendiagramms

Fügen Sie an der Stelle des Dokuments, an der wir das Diagramm hinzufügen, den folgenden Code ein.

Wir legen die Breite und Höhe des Diagramms durch Stile fest und fügen eine Kennung hinzu, damit das Skript funktioniert. Dieselbe Kennung muss in document.getElementById angegeben werden.

Diagrammparameter bestehen aus zwei Blöcken: aktuelle Daten zur Anzeige (Datenvariable) und Einstellungen (Optionsvariable). Die erste Zeile in Daten gibt die Namen nachfolgender Spalten an, und obwohl sie in keiner Weise angezeigt wird, funktioniert die Anzeige ohne sie nicht richtig. Der Titel des Diagramms ist in Optionen geschrieben, Sie können auch Dreidimensionalität und andere Einstellungen angeben, alle sind optional und wenn sie nicht gesetzt sind, werden sie standardmäßig übernommen.

Das Diagramm erweist sich als interaktiv, seine Teile werden hervorgehoben, wenn Sie mit dem Mauszeiger darüber oder über die Legende fahren.

Beispiele, eine Liste von Optionen und eine Beschreibung eines Tortendiagramms sind unter dieser Adresse verfügbar: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Ein Histogramm ist ein Balkendiagramm, das nützlich ist, um verschiedene Werte miteinander zu vergleichen. Nehmen wir als Beispiel die Ölförderung im 19. Jahrhundert in Russland und den USA (Abb. 2). Auf der Abszissenachse (horizontale Achse) sind Jahre aufgetragen, auf der Ordinatenachse (vertikale Achse) die Ölförderung in Tausend Tonnen. Die Höhe der Rechtecke entspricht dem angegebenen Wert.

Reis. 2. Histogramm

Das Prinzip zum Erstellen dieser Art von Diagramm ist ähnlich wie beim vorherigen - fügen Sie das Tag hinzu

, verknüpfen wir es mit einem Skript, das Daten für das Diagramm und Anzeigeparameter speichert (Beispiel 2).

Beispiel 2. Histogramm

Balkendiagramm

Fügen Sie zuerst ein Tag hinzu

und geben Sie die gewünschte Breite und Höhe mithilfe von Stilen an. Wichtig ist auch die Kennung, über die das Skript das ausgewählte Diagramm in das Element einfügt.

. Das Skript selbst behält im Vergleich zum vorherigen Beispiel seine Struktur bei und besteht aus zwei editierbaren Teilen - den eigentlichen Daten zur Anzeige auf dem Diagramm und seinen verschiedenen Einstellungen. Über die Parameter hAxis und vAxis fügen wir der Übersichtlichkeit halber die Titel der Achsen hinzu.

Zusammenfassung

Es ist praktisch, dass sich der Dienst an Benutzer mit unterschiedlichem Schulungsniveau richtet. Sie können die beigefügten Beispiele kopieren und erhalten sofort ein fertiges Diagramm einer Standardansicht. Diejenigen Benutzer, die sich mit einer Vielzahl von Parametern gründlich auskennen, werden mit Grafiken belohnt, die nach ihrem Geschmack und Ähnlichkeit mit dem Design der Website erstellt wurden.

Die Diagramme selbst werden recht schnell angezeigt, außerdem werden die aufgerufenen Dateien beim ersten Laden zwischengespeichert, sodass die spätere Anzeige der Diagramme auf der Seite schneller ist. Alle Browser werden unterstützt, einschließlich älterer Versionen von Internet Explorer.

Die Servicedokumentation wurde nicht ins Russische übersetzt und ist nur auf Englisch verfügbar, was einige Benutzer abschrecken kann. Dafür gibt es nur ein Mantra – Sprachen lernen.

Kurzer Überblick über JavaScript-Bibliotheken zum Plotten

Highcharts

Highcharts ist eine reine HTML5/JavaScript-Diagrammbibliothek, die intuitive interaktive Diagramme für Ihre Website oder Webanwendung bietet. Highcharts unterstützt derzeit Linien-, Spline-, Flächen-, Flächenspline-, Säulen-, Balken-, Kreis-, Punkt-, Winkellehren, Flächenbereich, Flächensplinebereich, Säulenbereich, Blasen-, Boxplot-, Fehlerbalken-, Trichter-, Wasserfall- und Polardiagrammtypen.

Google-Diagramme

Google Charts - Bietet eine Vielzahl von Diagrammen, die für Datenvisualisierungslösungen entwickelt wurden. Diese Diagramme basieren auf reiner HTML5/SVG-Technologie (wobei VML für ältere Versionen von IE akzeptiert wird), sodass keine Plugins erforderlich sind. Alle von ihnen sind interaktiv und viele von ihnen sind schwenkbar und skalierbar. Das Hinzufügen dieser Diagramme zu einer Seite kann in wenigen einfachen Schritten erfolgen.

CanvasJS

CanvasJS - einfach zu verwendende HTML5- und JavaScript-Bibliothek Diagramme, auf dem Element aufgebaut Leinwand. Diagramme können angezeigt werden verschiedene Geräte, einschließlich mobile Geräte, iPad, Android, Windows Phone, Microsoft Surface, ein Desktop-Computer usw. Dadurch können Sie funktionale Grafiken erstellen, die auf allen Geräten funktionieren, ohne die Wartbarkeit oder Funktionalität Ihrer Webanwendung zu beeinträchtigen. CanvasJS kommt mit schönen Themen und lädt 10 Mal schneller als normale Flash- und SVG-Grafiken - was zu Grafiken führt, die leicht und schön sind.

DiagrammJS

Chart JS – Leichte, objektorientierte clientseitige Diagrammbibliothek.

RGraph

RGraph ist eine auf HTML5 basierende JavaScript-Bibliothek zum Erstellen von Webdiagrammen mit Unterstützung für über zwanzig verschiedene Arten Visualisierung. RGraph erstellt HTML5-Diagramme in einem Webbrowser mit JavaScript und taggen Leinwand.

Übersetzung

Obwohl die meisten Bibliotheken kostenlos und Open Source sind, haben einige von ihnen kostenpflichtige Versionen mit zusätzlichen Funktionen.

D3.js - Datenorientierte Dokumente

D3.js funktioniert nicht richtig mit älteren Browsern wie IE8. Sie können jedoch jederzeit Plugins wie das aight-Plugin für die Cross-Browser-Kompatibilität verwenden.

D3.js wurde häufig auf Websites wie NYTimes, Uber und Weather.com verwendet.

Google-Diagramme

Google Charts hat auch viele Konfigurationseinstellungen, mit denen Sie das Aussehen Ihres Diagramms ändern können. Diagramme werden mit HTML5/SVG generiert, um browserübergreifende Kompatibilität und plattformübergreifende Portabilität auf iPhone, iPad und Android zu gewährleisten. Enthält auch VML zur Unterstützung älterer IE-Versionen.

HighchartsJS

Einer der größten Vorteile der Verwendung von HighchartsJS ist die Kompatibilität mit älteren Browsern wie Internet Explorer 6. Standardbrowser verwenden SVG zum Rendern von Diagrammen. Im Legacy-IE werden Grafiken über VML erstellt.

Obwohl HighchartsJS für den persönlichen Gebrauch kostenlos ist, müssen Sie eine Lizenz für die kommerzielle Nutzung erwerben.

Fusionsdiagramme

Fusioncharts ist eine der älteren JavaScript-Bibliotheken, die erstmals 2002 veröffentlicht wurde. Diagramme werden mit HTML5/SVG und VML für bessere Portabilität und Kompatibilität generiert.

Fusioncharts ist hochkompatibel mit älteren Browsern wie IE6. Aus diesem Grund ist es in vielen Handelsorganisationen zu einer der beliebtesten Bibliotheken geworden.

Flotte

Flot ist eine JavaScript-Bibliothek für jQuery, mit der Sie Grafiken/Diagramme erstellen können. Eine der ältesten und beliebtesten Diagrammbibliotheken.

Flot unterstützt Balkendiagramme, Streudiagramme, Balkendiagramme, Säulendiagramme und jede Kombination dieser Diagrammtypen. Auch kompatibel mit älteren Browsern wie IE 6 und Firefox 2.

Flot ist völlig kostenlos, kommerzieller Support ist auf spezielle Anfrage an den Entwickler erhältlich. Hier ist eine Liste von Diagrammbeispielen, die mit Flot erstellt wurden.

amCharts

amCharts ist zweifellos eine der schönsten Diagrammbibliotheken, die es gibt. Es ist vollständig in 3 unabhängige Typen unterteilt: JavaScript-Charts, Maps-Charts (amMaps) und Aktiencharts.

EJS Chart ist in kostenlosen und kostenpflichtigen Versionen verfügbar. Die kostenlose Version hat eine Einschränkung, die es Ihnen nicht erlaubt, mehr als 1 Diagramm pro Seite und mehr als zwei (numerische) Sequenzen pro Diagramm zu verwenden. Überprüfen Sie die Preisdetails.

uvCharts

uvCharts ist eine Open-Source-JavaScript-Bibliothek, die behauptet, über 100 Konfigurationsoptionen zu haben. Es hat Diagramme für 12 verschiedene Standards direkt aus der Box.

Fazit

Ich hoffe, Ihnen hat dieser Artikel gefallen. Einen schönen Tag noch.

Guten Tag, mein lieber Leser, heute möchte ich Ihnen eine wunderbare Auswahl an Plugins und Beispielen zum Erstellen verschiedener Arten von Diagrammen und Grafiken anbieten. Ich denke, jeder wird etwas Interessantes für sich finden.

1. jqPlot - Ein vielseitiges und erweiterbares JQuery-Plug-In zum Plotten

jqPlot- jquery-Plugin zum Plotten in Javascript.
jqPlot produziert schöne Linien, Balken- und Tortendiagramme mit vielen Funktionen:
Zahlreiche Diagrammstile.
Daten auf einer Achse mit benutzerdefinierter Formatierung.
Bis zu 9 Y-Achsen.
Drehung des Achsentexts.
Automatische Trendlinienberechnung.
Pop-up-Hinweise.
Benutzerfreundlichkeit.

2. Dygraphs-Visualisierungsbibliothek

Dygraphs ist eine Open-Source-Bibliothek, die interaktive, skalierbare Zeitreihendiagramme erstellt. Es wurde entwickelt, um dichte Datensätze anzuzeigen und Benutzern zu ermöglichen, sie zu untersuchen und zu interpretieren.

Besonderheiten:
Anzeige von Zeitreihen ohne Verwendung externer Server oder Flash-Animation
Funktioniert im Internet Explorer (unter Verwendung von Excanvas)
Kleine Größe (69kb)
Zeigt Werte beim Hover an
Interaktiver Zoom
Einstellbarer Mittelungszeitraum
Kompatibel mit der Google-Visualisierungs-API
http://dygraphs.com/

3. Highcharts - Interaktive JavaScript-Charts für Ihre Website

Highcharts ist eine in Charts geschriebene Bibliothek reines JavaScript, bietet interaktive Diagramme für Ihre Website oder Webanwendung. Highcharts unterstützt derzeit die Diagrammtypen Line, Spline, Area, Areaspline, Columns, Bar, Pie, Scatter, Angle Gauges, Arearange, Areasplinerange, Columnrange und Polar Chart.

4. jQuery mit Mausrad-Scroll-Effekt

Verwendet keine PNG- oder JPG-Sprites.
Verarbeitet Berührungs-, Mausrad- und Tastaturereignisse.
http://anthonyterrien.com/knob/

5. Stilvolle Indikatoren auf CSS3

Stilvolle, animierte Indikatoren mit CSS3.
http://www.red-team-design.com

6. Highcharts mit jQuery

Highcharts ist eine mit JQuery und Mootools kompatible Diagrammbibliothek. Es ist mit allen Standard-Webbrowsern kompatibel und verwendet JSON-Daten, um ein Diagramm zu erstellen. Unterstützt mehrere Diagrammtypen Linie, Splines, Fläche, Areaspline, Spalte, Balken, Torte und Streudiagramm.
highcharts.com

7. Animiertes Diagramm in HTML5 und jQuery

Schönes, interaktives Tortendiagramm mit die neuesten Technologien HTML5. Verwendet kein Flash.

8. Experimentelles CSS3-Diagramm

Diese Methode ist ein Beispiel für das Erstellen experimenteller Plots in CSS3 ohne JavaScript oder Bilder. Die Verwendung von CSS3-Selektoren ist wirklich beeindruckend: Transformationen, Farbverläufe und Übergänge im Einsatz. Leider nicht im IE unterstützt.

9. Ein weiteres JQuery- und HTML5-Diagramm

Das Visualize-Plugin analysiert wichtige Inhaltselemente auf strukturierte Weise. HTML-Tabelle, und verwendet HTML5, um sie in ein Diagramm oder eine Grafik umzuwandeln. Beispielsweise können Zeilen in einer Datentabelle als Balken-, Linien- oder Keildiagramm dienen. Visualize überprüft auch automatisch das Maximum und Mindestwert in der Tabelle und berechnet daraus die x-Achsenwerte für die Linie und das Histogramm. Schließlich enthält das Plugin zwei verschiedene CSS-Stil- Hell und Dunkel, die unverändert verwendet werden können oder als Ausgangspunkt für die Anpassung von Diagrammen und Grafiken dienen können.