Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » JavaScript & jQuery » Neun JavaScript-Bibliotheken zum Gestalten interaktiver Charts

Neun JavaScript-Bibliotheken zum Gestalten interaktiver Charts

  • Aktualisiert am 22. Februar 2023
  • von Markus Seyfferth
  • JavaScript & jQuery, Programmierung
  • 6 Kommentare

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.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

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.

Inhaltsverzeichnis

Lust auf mehr?

So kannst du JavaScript spielerisch lernen (4 Games)

JavaScript ist eine webbasierte Skriptsprache, die auf fast jeder Website eingesetzt wird. JavaScript macht eine statische Website interaktiv und wird vor allem verwendet, um Inhalte dynamisch zu laden.

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.

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.

6 Antworten

  1. 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/

  2. 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
  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. 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
  5. 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

Schreibe einen Kommentar Antworten abbrechen

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

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

Für Unternehmer: Finden Sie Ihre Agentur in…

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

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen