Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →

Dr. Web » JavaScript & jQuery » Neun JavaScript-Bibliotheken zum Gestalten interaktiver Charts

Neun JavaScript-Bibliotheken zum Gestalten interaktiver Charts

Artikel weiterempfehlen

  • Aktualisiert am 22. Februar 2023
  • 6 Kommentare
  • Markus Seyfferth von Markus Seyfferth
Lesedauer: 5 Minuten

Inhaltsverzeichnis

Eine Menge Daten mit sehr vielen Variablen möchte gut strukturiert und möglichst interaktiv dargestellt werden. Rohe Datensätze sind schwer zu verstehen, deshalb müssen Daten erst aufbereitet werden, um sie verständlich zu machen. Diagramme können hier hilfreich sein. Im Webdesign können wir für diese Aufgabenstellung Charts nutzen, denn auch hier sind Diagramme eine der besten Möglichkeiten zur Visualisierung von komplexen Datensätzen. Das Hinzufügen von interaktiven Möglichkeiten gibt dem Leser die Möglichkeit, mit den Datensätzen zu interagieren. Interaktive Charts sind recht leicht in eine Website zu integrieren, vor allem mit der Hilfe einiger JavaScript-Bibliotheken. Im heutigen Beitrag stellen wir Ihnen neun Bibliotheken vor, mit denen sich interaktive Diagramme leicht realisieren lassen.

interaktivecharts-teaser_DE

JavaScript-Bibliotheken zur Erstellung von Diagrammen

Wir haben Ihnen neun der besten Chart-Bibliotheken herausgesucht und bieten so viele Möglichkeiten, große Datenmengen gut verständlich zu visualisieren. Manche Bibliotheken sind recht einfach aufgebaut und nicht ganz so umfangreich. Einige andere hingegen lassen jede Art der Daten-Visualisierung zu, die man sich denken kann. Eine modular aufgebaute Bibliothek haben wir ebenfalls verlinkt. Ihr Vorteil dabei ist, dass Sie nur das in Ihre Website integrieren müssen, was wirklich notwendig ist. Das bläht die Website nicht auf und ist der Performance förderlich. Alle vorgestellten Chart-Bibliotheken sind kostenlos.

Chart.js – HTML5 Charts

Chart.js

Chart.js nutzt das HTML5 Canvas Objekt zur Darstellung der Daten. Die Bibliothek vermag Ihre Daten in sechs verschiedenen Diagramm-Stilen darzustellen und ist responsiv und modular. Modular bedeutet, dass nicht genutzte Chart-Typen entfernt werden können, um die Website nicht unnötig zu belasten. Farben und Animationen können recht leicht angepasst werden.

Chartist.js – Simple responsive Charts

Chartist.js

Die Chartist.js Bibliothek nutzt die SVG-Technik zur Darstellung ansprechender Diagramme. Der Vorteil von Chartist ist die strikte Trennung von Design (CSS) und Funktion (JS). Für Entwickler sind die genutzten SASS-Dateien im Download-Paket enthalten. Mit Hilfe der Chartist Animation API können Sie jede Art von Diagrammen realisieren. Chartist hat sich der Kollege Denis Potschien schon einmal näher angeschaut.

C3.js – D3-based reusable chart library

C3.js

Der Funktionsumfang von C3.js ist recht groß. Die Bibliothek ist mit interessanten Effekten und Animationen versehen, wie die Demo auf der Startseite zeigt. Über die API kann jederzeit Einfluss auf die Darstellung der Charts genommen werden. Eine Design-Anpassung ist ebenfalls leicht mit CSS möglich. Auf der Seite mit den Beispielen lässt sich schnell erkennen, wie wandelbar und vielseitig die Diagramm-Bibliothek ist.

Flot – Attractive JavaScript plotting for jQuery

Flot

Flot ist ein jQuery Plugin für die Erstellung von Interaktiven Charts. Unterstützt werden hierbei das Drehen der Diagramme, das Schwenken, Hinein- oder Hinaus-Zoomen und Datenpunkt-Wechselwirkungen. Einzelne Datenbereiche innerhalb der Diagramme können ab- oder hinzugeschaltet werden. Einige Demo-Beispiele sind online, man kann das Plugin vor dem Download testen. Flot bietet Ihnen eine Vielzahl von Diagramm-Typen und basiert auf dem HTML5 Element Canvas.

ECharts – Bring your Data to Life

ECharts

Die ECharts-Bibliothek kommt aus China und scheint dort sehr populär zu sein. EChart ist erstaunlich umfangreich, wie die Liste der Features und die Demo-Beispiele zeigen. Die Bibliothek schafft es, große Datenmengen zu verarbeiten (Plotten von bis zu 200.000 Datenpunkten auf einem kartesischen Diagramm) und hat die Fähigkeit, mühelos Daten zu extrahieren, zu integrieren und den Austausch von Daten zwischen mehreren Diagrammen vorzunehmen. Man kann recht einfach von einen Diagrammtyp zu einem anderen wechseln und eine Menge mehr.

Peity – Progressive SVG Charts

Peity

Peity ist ein weiteres, auf SVG basierendes Chart-Plugin für jQuery. Es vermag jedes Element in ein Diagramm zu konvertieren, und bietet für die visualisierte Aufbereitung der Daten folgende Chart-Typen an: Torten und Donut Charts, Balkendiagramme und Liniencharts. Ein einfaches Element wie zum Beispiel ein <span> kann mittels eines Wertes (<span class=“donut“>1/5</span>) und dem Aufruf  $(‚.donut‘).peity(‚donut‘) in ein Donut-Diagramm gewandelt werden.

dc.js – Dimensional Charting Javascript Library

dc.js

DC.js nutzt ebenso wie C3.js auch die D3-Bibliothek, um ansprechende Diagramme mittels SVG zu rendern. DC.js wurde entwickelt, um Daten und Analysen für den Desktop und mobile Geräte aufzubereiten. Benutzer-Interaktionen lassen sich zu Ihren Diagrammen hinzufügen. Die Software erlaubt Ihnen, alle Arten von Diagrammen – von einfach bis hochkomplex – darzustellen.

Google Charts

Google-Charts

Die Google Charts API erlaubt es, interaktive Diagramme und Datentools mit der Google Visualization API zu erstellen. In der Chart-Galerie können Sie die einzelnen Chart-Typen ansehen und die von Ihnen benötigten auswählen. Um beginnen zu können, muss etwas JavaScript der Website hinzugefügt werden, damit die Google Charts Bibliothek geladen werden kann. Nach dem Auflisten der Daten in Ihrer Website, können Sie mit einigen benutzerdefinierten Änderungen der Chart-Optionen eine Darstellungsvariante bestimmen. Nun muss nur noch ein Chart-Objekt mit einer ID und innerhalb der Website ein <div> Element erstellt werden, innerhalb dessen sich die Diagramme befinden sollen.

NVD3 Re-usable charts for d3.js

NVD3

NVD3 ist keine eigenständige Bibliothek, sondern eine Reihe von nutzbaren Vorlagen für die d3.js Bibliothek. Die Tabellen und Diagramme sind mit d3.js aufgebaut und dienen als Vorlage zum leichteren Erlernen von d3.js. Sie können die Vorlage beliebig verändern und so leichter verstehen, wie Sie gute Diagramme aufbauen sollten. Die Vorlagen finden Sie in den Beispielen.

Links zum Beitrag

  • Chart.js – HTML5 Charts
  • Chartist.js – Simple responsive Charts
  • C3.js – D3-based reusable chart library
  • Flot – Attractive JavaScript plotting for jQuery
  • ECharts – Bring your Data to Life
  • Peity – Progressive SVG Charts
  • dc.js – Dimensional Charting Javascript Library
  • Google Charts
  • NVD3 Re-usable charts for d3.js
  • Dr. Web: Daten spannend aufbereitet: Chartist.js erstellt responsive, animierte Diagramme mit SVG

(dpe)

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Lust auf mehr?

  • Dieter Petereit Dieter Petereit
  • 7. März 2018

Wenn das Webdesign verschwindet: Headless Browser brauchen keine schöne Gestalt

Ist der Browser, wie wir ihn heute kennen, ein Auslaufmodell? Können wir auch ohne ihn das Web nutzen? Die Antwort auf die zweite Frage ist ein klares Ja. Das Headless Web macht es möglich.
  • Design, JavaScript & jQuery, Programmierung, UX Design
  • Dieter Petereit Dieter Petereit
  • 16. Februar 2018

Einfache Lösungen für dynamisches Webdesign mit HTML5-Data-Attributen

Lebendige Effekte auf Websites können dir im Wettbewerb um die Aufmerksamkeit der Nutzer gute Dienste leisten. Du denkst vielleicht direkt an parallaxes Scrolling. Das aber ist nicht die einzige Option für dynamisches Webdesign.
  • Design, HTML, JavaScript & jQuery, Programmierung, UX Design
  • Denis Potschien Denis Potschien
  • 14. Juni 2017

JavaScript und Suchmaschinen: Das solltest du beachten

Noch vor einigen Jahren war JavaScript mehr als umstritten. Nervige Werbe-Pop-ups führten dazu, dass die Programmiersprache oft ganz grundsätzlich blockiert wurde. Mittlerweile ist JavaScript aus dem modernen Webdesign nicht mehr wegzudenken. Vor allem im mobilen Internet spielt JavaScript eine wichtige Rolle – unter anderem zur Medienwiedergabe, aber auch für Geolocation und moderne Navigationen. Doch wie gut verträgt sich JavaScript mit Suchmaschinen? Was musst du beachten?
  • JavaScript & jQuery, SEO
  • Denis Potschien Denis Potschien
  • 26. Mai 2017

Framework jQuery: die Vorteile und Nachteile

Frameworks wie jQuery gehören zu den bekanntesten und weit verbreitetsten Helfer, die auf Websites eingesetzt werden. Das Framework ermöglicht es, schnell und unkompliziert auf HTML-Elemente zuzugreifen und diese zu manipulieren oder per CSS zu gestalten. Ich selbst bin kein großer Freund von solchen Frameworks und versuche, sie – wo immer es geht – zu vermeiden. Das funktioniert nicht immer, ist aber häufig problemlos machbar.
  • JavaScript & jQuery, Programmierung, Webdesign
  • Markus Seyfferth Markus Seyfferth
  • 31. Juli 2016

PHP 7 und WordPress: Kannst Du den Turbo bereits zünden? [Infografik]

Seit dem dritten Dezember 2015 ist die neueste Version von PHP erhältlich. Um Altlasten zu beseitigen, entschied man sich dazu, teilweise die Abwärtskompatibilität aufzugeben. Für WordPress-User stellt sich nun die Frage, ob PHP7 bereits nutzbar ist und welche Vorteile die Nutzung bringen kann. Daher werfen wir einen kurzen Blick auf diese wichtigen Fragen.
  • Programmierung, Tipps, Tricks & Tutorials, WordPress
  • Denis Potschien Denis Potschien
  • 9. Juli 2016

Mit Anime.js animierst du CSS, SVG und mehr ganz einfach

Zu den zahlreichen Frameworks für Animationen gesellt sich mit anime.js ein weiteres. Im Gegensatz zu den vielen anderen Frameworks erlaubt anime.js nicht nur die Animation per CSS-Eigenschaften. Du kannst damit auch SVG- und HTML-Eigenschaften per Animation verändern. Gerade im modernen Webdesign ist das SVG-Format kaum wegzudenken. Das Framework kommt jedenfalls zur rechten Zeit.
  • JavaScript & jQuery, Programmierung

6 Antworten

  1. Manuel M. sagt:
    21. September 2015 um 12:46 Uhr

    Super Übersicht.
    Benutze Amchart Seit mehreren Jahren für Wetterdigramme.
    Für Wetter Jahres Temperatur Ansicht, benutze ich Highcharts.
    Und für Wetter Instrumente versuche ichs mit RGraph.

    Leider schaffe ich es nicht mit Live Wetter Daten 🙁

    Antworten
  2. Deedee sagt:
    13. August 2015 um 9:35 Uhr

    Ich benutze seit längere Zeit C3.js für sehr komplexe Anwendungen und bin sehr zufrieden damit. Die Online Doku und Demo sind top.

    Antworten
  3. Ich sagt:
    13. August 2015 um 8:40 Uhr

    Ich benutze seit längerem RGraph http://www.rgraph.net/ und bin sehr zufrieden. Ist unter der GPL auch für kommerzielle Projekt kostenlos nutzbar.

    Antworten
  4. Nino Mergner sagt:
    13. August 2015 um 5:10 Uhr

    Leider sollte man besonders chart.js ausgiebig auf die vorhergesehenen Verwendungszwecke testen, da bei manchen Diagrammarten einige Bugs auftreten, die die kompletten Inhalte von der Zeichenfläche verschwinden lassen. Schade, da es ansonsten einen wirklich guten Eindruck macht.

    Antworten
  5. Tobias F. sagt:
    12. August 2015 um 10:34 Uhr

    Nette Auswahl. Allerdings wurde eine der umfangreichsten Chart-Javascript-Bibliotheken vergessen: Highcharts.

    Antworten
    1. Dieter Petereit sagt:
      12. August 2015 um 17:52 Uhr

      Danke für die Ergänzung. Diese Bibliothek haben wir aber mit Absicht nicht aufgenommen, da sie nur für nicht-kommerzielle Zwecke kostenlos ist. Wer dennoch mal schauen möchte: http://www.highcharts.com/

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑