Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

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

Neun JavaScript-Bibliotheken zum Gestalten interaktiver Charts

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 6 Kommentare
Lesedauer: 5 Minuten
  • von Dr. Web Redaktion
  • 12. August 2015
Bookmarke mich
Share on pocket

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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.

Agenturpartner

Philipp Pistis – WordPress Agentur

Prittriching

SEO-Sicht

Berlin

Homepage & Design Heroes GmbH

Balingen

Online Solutions Group

München

Optimerch GmbH

Dortmund

Alle Agenturpartner

Jobs

Senior SEO Manager

München

Webtexter für SEO Agentur

Salzburg (Österreich)

Business Development Manager

München

Elektroinstallateur – Rechenzentrum

Karlsruhe

Projektmanager/ Projektleiter in München

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Grav CMS: Blitzschnell, einfach und modern

Grav CMS ist eines der interessantesten neuen Content Management Systeme am Markt. Es geht einen völlig anderen Weg als bisher bekannte Ansätze und kommt sehr

 →   

Du lernst nie aus: 20+ internationale Online-Schulungsangebote

Glücklicherweise sind die Zeiten vorbei, in denen sich Wissen hinter den Mauern altehrwürdiger Schulen oder in den Tiefen riesiger Bibliotheken verschanzte. Weite Teile der Weltbevölkerung

 →   

Atomic Design: So gestaltest du deine Website modular

Begrifflichkeiten im Webdesign sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu diesen Hülsen gezählt werden. Denn er dient nur seinem

 →   

6 Antworten zu „Neun JavaScript-Bibliotheken zum Gestalten interaktiver Charts“
— was ist Deine Meinung?

  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/

      Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.