Kolumne: The Good Parts

Donuts mit Füllung
Kommentare

Wer mag sie nicht, die bunten Bildchen, die bei der täglichen Arbeit helfen, einen Überblick über komplexe Daten zu gewinnen. Linien-, Torten-, Donut- und Balkendiagramme sind nur einige Varianten. Die Erzeugung von aussagekräftigen Graphen jedoch ist keine leichte Tätigkeit: Viel Energie und Gedanken müssen aufgewendet werden, um Diagramme zu entwerfen, die einen wirklichen Mehrwert bieten. Und selbst wenn diese Aufgabe erfolgreich abgeschlossen ist, bleibt immer noch die Frage nach dem „Wie“. Wie werden die entworfenen Graphen nun gerendert? Dieser Artikel widmet sich einigen JavaScript-Bibliotheken, die das Rendern von Graphen erleichtern und Entwicklern somit das lästige „Wie“ abnehmen.

Vor einigen Jahren waren die Dinge noch einfach, ein Großteil der Businesslogik einer Applikation wurde serverseitig ausgeführt. War die Erzeugung von Diagrammen Bestandteil dieser Logik, so fand sie ebenfalls auf dem Server statt. Heute sind die Dinge komplizierter geworden. Der Wunsch nach dynamischen Diagrammen, die nicht nur durch Animationen glänzen, sondern dem Benutzer ebenfalls ein gewisses Maß an Interaktionsmöglichkeiten bieten, kann nur durch clientseitig gezeichnete Graphen erfüllt werden. Glücklicherweise bieten moderne Browser alle nötigen Technologien, die dies ermöglichen – ganz ohne Flash oder sonstige proprietäre Komponenten.

Das Zeichnen beliebiger Abbildungen im Browser ist allerdings noch nicht gleichbedeutend mit der Ausgabe sinnvoller Diagramme. Neben extrem spezialisierten Diagrammtypen existieren eine ganze Handvoll typischer Diagramme wie Linien-, Kuchen, Balken- und Donutdiagramme. Wird einer dieser Typen benötigt, so bieten sich zur Erzeugung fertige Bibliotheken an. Hierdurch wird Arbeitszeit gespart, die besser in den Entwurf und eine sinnvolle Darstellungsform der Daten fließen kann. Im Folgenden werden drei unterschiedliche Bibliotheken betrachtet. Es werden sowohl kurze Anwendungsbeispiele demonstriert als auch die jeweiligen Vor- und Nachteile beleuchtet.

Chart.js

Chart.js ist eine extrem kompakte und recht neue Bibliothek zur Erzeugung von Diagrammen auf Clientseite mittels JavaScript. Ein großer Vorteil dieser Bibliothek ist, dass sie bewusst auf jegliche Abhängigkeiten von anderen JavaScript-Bibliotheken verzichtet. Durch diese Entscheidung ist Chart.js gerade einmal 4,5 kB groß (minifiziert und gzip-komprimiert). Unterstützt werden Linien-, Balken-, Netz-, Polar- und Donutdiagramme. Abbildung 1 zeigt Beispiele für jeden dieser Diagrammtypen erzeugt von Chart.js.

Abb. 1: Linien-, Balken-, Netz-, Polar- und Donutdiagramm gerendert mittels Chart.js

Abb. 1: Linien-, Balken-, Netz-, Polar- und Donutdiagramm gerendert mittels Chart.js

Technologie: Canvas

Chart.js setzt das -Element ein, um die gewünschten Diagramme innerhalb des Browsers zu realisieren. Gezeichnet werden die Diagramme im 2-D-Modus. Diese Herangehensweise hat mehrere Vorteile: Canvas bietet einen guten Kompromiss zwischen Funktionsumfang und Unterstützung in verschiedenen, auch älteren, Browserversionen. Zusätzlich zu nahezu jedem Desktopbrowser werden außerdem alle relevanten mobilen Browser auf Android sowie iOS unterstützt. Internet Explorer vor Version 8 können Googles ExCanvas-Bibliothek als Kompatibilitätsschicht einsetzen, welche das Canvas-API in VML nachbildet, die von älteren Internet-Explorer-Versionen verarbeitet werden kann. Verzichtet man auf Animationen innerhalb der Diagramme, ist dieser Fallback performant genug, um ein visuell ansprechendes Ergebnis ohne weitere ernsthafte Einbußen zu liefern.

Neben den Vorteilen, die der Einsatz von Canvas als Rendering-Technologie bietet, existiert leider ebenfalls ein gravierender Nachteil: Die Bereitstellung von Schnittstellen zur Benutzerinteraktion ist bei Diagrammen, die mit Canvas gezeichnet wurden, relativ aufwändig. Es ist komplexe Logik erforderlich, um auf Interaktionen mit einzelnen Elementen eines Diagramms zu reagieren, da alle diese Elemente in einem großen Bild (Canvas) gerendert werden und nachträglich für Ereignisse nicht einfach voneinander getrennt werden können. Das Anzeigen eines Tooltips beim Überfahren eines Datenpunkts mit der Maus oder die Reaktion auf einen Klick eines Tortenstücks ist demnach nicht einfach zu realisieren.

Chart.js verzichtet ganz bewusst auf die Implementierung der für diese Ereignisse nötigen Algorithmen, um den Umfang und die Größe der Bibliothek möglichst gering zu halten. Ist also die Benutzerinteraktion mit Diagrammen eine zwingende Anforderung, scheidet Chart.js aus. Reicht ein dynamisch generierter Graph ohne weitere Interaktionsmöglichkeiten aus, so kann Chart.js wie im Folgenden gezeigt eingesetzt werden.

Ein Balkendiagramm mit Chart.js

Abb. 2: Balkendiagramm, gerendert mit Chart.js

Abb. 2: Balkendiagramm, gerendert mit Chart.js

Zur Veranschaulichung des Chart.js-APIs wird hier ein Balkendiagramm mit Benutzungsstatistiken verschiedener Browser auf zwei unterschiedlichen Seiten erzeugt (Abb. 2). Um mit Chart.js arbeiten zu können, wird zunächst ein entsprechender Canvas-Kontext benötigt. Das wird auf die folgende oder eine gleichwertige Art und Weise einfach innerhalb der Seite erstellt:

Als Nächstes muss der 2d-Kontext des zugehörigen Canvas abgefragt werden, der zur Erstellung eines jeden Charts benötigt wird. Auf diese Weise verfügt die Bibliothek über alle nötigen strukturellen Informationen, um das gewünschte Diagramm an die korrekte Stelle innerhalb der Seite zu zeichnen:

var context = document.getElementById("browser-statistics").getContext("2d"); var chart = new Chart(ctx).Bar(data);

Die Erzeugung eines Graphen geschieht durch einen Aufruf des new-Operators auf dem Chart-Objekt. Diesem wird in jedem Fall der Canvas-Kontext übergeben, für den dieses Diagramm zuständig ist. Anschließend wird der gewünschte Charttyp ausgewählt: Line, Bar, Radar, PolarArea, Pie oder Doughnut. Dem Typen wird ein ihm entsprechendes Set an Daten übergeben sowie wahlweise eine Liste mit Optionen zum Rendering. Der Aufbau der Daten unterscheidet sich je nach verwendetem Diagrammtyp. Eine ausführliche Dokumentation der einzelnen Datentypen sowie zusätzlich verwendbare Optionen finden sich unter. Um das hier skizzierte Beispiel zu erzeugen, wurde der in Listing 1 gezeigte Datensatz verwendet.

var data = {
  labels : ["Explorer","Opera","Safari","Konqueror","Mozilla","Chrome"],
  datasets : [
    {
      fillColor : "rgba(220,220,220,0.5)",
      strokeColor : "rgba(220,220,220,1)",
      data : [10917,1464,652,474,19114,23456]
    },
    {
      fillColor : "rgba(151,187,205,0.5)",
      strokeColor : "rgba(151,187,205,1)",
      data : [13927,2464,152,1474,14
      14,28456]
    }
  ]
};

Zunächst werden die X-Achsen-Beschriftungen durch die labels Property definiert. Anschließend folgt eine beliebige Menge an datasets, die Y-Werte für jedes der Labels bereitstellen. Existiert mehr als ein dataset – wie in diesem Beispiel – werden pro X-Achsen-Eintrag mehrere Balken gezeichnet. Zusätzlich zu den Daten selbst kann über die Eigenschaften fillColor und strokeColor das optische Erscheinungsbild des jeweiligen Elements beeinflusst werden. Jede in CSS mögliche Art der Farbdefinition ist als Wert zulässig.

morris.js

Chart.js ist eine leistungsfähige Diagrammbibliothek, die auf allen relevanten Plattformen genutzt werden kann. Wie erwähnt lässt sie jedoch Fähigkeiten zur Interaktion mit dem Benutzer, wie Tooltips und Ereignisse, vermissen. Ist dies ein zwingendes Kriterium, muss Ersatz her. Ein möglicher Kandidat ist das Projekt morris.js. Hierbei handelt es sich – wie bei Chart.js auch – um eine Bibliothek zum Rendern unterschiedlichster häufig benötigter Diagrammtypen. Die Auswahl ist etwas eingeschränkter als bei dem zuvor vorgestellten Vertreter dieser Gattung, jedoch für die meisten Fälle vollkommen ausreichend. Verglichen mit Chart.js ist morris.js ein Schwergewicht in Sachen Downloadgröße. Die Bibliothek besitzt zwei Abhängigkeiten auf externe Libraries: jQuery und Raphaël. Zusammen mit der Charting-Bibliothek selbst ergibt sich hieraus eine Größe von 72 kb (minifiziert und gzip-komprimiert).

Technologie: SVG

Im Gegensatz zu Chart.js setzt morris.js auf SVG (Scalable Vector Graphics) als Zeichenlösung. Da sich alle in SVG gezeichneten Szenen aus einzelnen Elementen zusammensetzen, die wiederum per DOM adressiert werden können, erleichtert diese Vorgehensweise das Hinzufügen von Benutzerinteraktion erheblich.

Aufgrund dieser Fähigkeit sind Tooltips fester Bestandteil von morris.js. Sie stellen üblicherweise den gerade mit der Maus überflogenen Datenpunkt mit detaillierten Werten dar. Eine Anpassung der Ausgabe ist in Grenzen natürlich ebenfalls möglich.

Durch die Wahl von SVG als Ausgabemedium ergeben sich auch einige Nachteile. Neben der deutlich höheren Rechenlast beim Zeichnen von Animationen ist die geringere Kompatibilität mit älteren Browsern eines der gravierendsten Mankos dieser Technologie. Durch den Einsatz von Raphaël als Abstraktionsschicht zum Erzeugen der SVGs wird dieser Nachteil jedoch erheblich gemildert. Der Einsatz in Internet-Explorer-Inkarnationen der Version 8 und davor ist kein Problem und funktioniert ohne weitere Maßnahmen des Entwicklers. Das Fehlen der Unterstützung für SVG auf älteren mobilen Android-Versionen (<3.0) lässt sich jedoch nicht nachrüsten. Somit bleiben Endgeräte mit diesem System leider außen vor. iOS hingegen stellt hier kein Problem dar und wird in jeder relevanten Version unterstützt.

Ein Balkendiagramm mit morris.js

Abb. 3: Balkendiagramm mit Mouse Over Tooltip gerendert durch morris.js

Abb. 3: Balkendiagramm mit Mouse Over Tooltip gerendert durch morris.js

Die Initialisierung von morris.js ist der von Chart.js sehr ähnlich. Natürlich muss zunächst die Bibliothek samt ihrer Abhängigkeiten geladen werden. Anschließend wird ebenfalls ein Container benötigt, in den das zu erzeugende Diagramm gezeichnet werden soll. Da morris.js kein Canvas einsetzt, reicht in diesem Fall ein einfaches Element als Platzhalter:

Auf den Einsatz des new-Operators wird komplett verzichtet. An dessen Stelle wird der gewünschte Diagrammtyp (Line, Area, Bar und Doughnut) einfach auf dem Objekt Morris aufgerufen und ihm eine Konfiguration übergeben: Morris.Bar(configuration);

Das configuration-Objekt beinhaltet hierbei alle nötigen Informationen, um das Diagramm zu rendern. Das schließt sowohl die Daten selbst, wie auch entsprechende strukturelle Informationen wie Farben und Maße, mit ein. Listing 2 zeigt die für den Beispielgraphen benötigte Konfiguration. Zunächst einmal wird mit element das Element spezifiziert, das den Platzhalter innerhalb der Seite definiert, in den das Diagramm gezeichnet werden soll. Anschließend wird ein Array von Daten durch Verwendung der Eigenschaft data übergeben, gefolgt von einer Liste mit zu verwendenden Farben für die Darstellung der einzelnen Elemente des Diagramms. Die weiteren Eigenschaften dienen der Beschreibung des zur Verfügung gestellten Datenmodells.

Morris.Bar({
  element: "browser-statistics",
  barColors: ["rgba(220,220,220,0.8)", "rgba(151,187,205,0.8)"],
  data: data,

  xkey: "browser",
  ykeys: ["oldSite", "newSite"],
  labels: ["a.example.com", "b.example.com"]
});

Datenzentrisches Modell

Im Vergleich zu seinem Konkurrenten verfolgt morris.js einen datenzentrischen Ansatz zur Definition des darzustellenden Graphen. Anstatt die Daten so zu definieren, wie die Bibliothek sie erwartet, übergibt man ihr deutlich freier strukturierte Daten sowie eine Beschreibung, wie sie zu interpretieren sind. In dem hier gewählten Beispiel kommen die gleichen Daten zum Einsatz wie bereits zuvor zur Veranschaulichung von Chart.js. Im Kontrast hierzu sind sie jedoch sehr viel sinnvoller strukturiert (Listing 3). Die jeweiligen Datensätze sind anstelle von Datasets nach Browsern gruppiert. Außerdem besitzen die jeweiligen Einträge sprechendere Schlüssel: browser, oldSite und newSite.

var data = [
  {browser: "Explorer", oldSite: 10917, newSite: 13927},
  {browser: "Opera", oldSite: 1464, newSite: 2464},
  {browser: "Safari", oldSite: 652, newSite: 152},
  {browser: "Konqueror", oldSite: 474, newSite: 1474},
  {browser: "Mozilla", oldSite: 19114, newSite: 14144},
  {browser: "Chrome", oldSite: 23456, newSite: 28456}
];

Natürlich muss morris.js nun eine Art Übersetzungstabelle zur Verfügung gestellt werden, damit die Bibliothek Anhaltspunkte besitzt, wie die nach dem aktuellen Anwendungsfall geformten Daten darzustellen sind. Zu diesem Zweck werden der Konfiguration (Listing 2) drei weitere Informationen übergeben: xkey, ykeys und labels.

Der Schlüssel xkey beschreibt hierbei, unter welcher Eigenschaft der Renderer die Werte für die Beschriftung der X-Achse findet. In dem hier gewählten Beispiel ist dies der Schlüssel browser. ykeys beschreibt eine Liste (ein Array) von Schlüsseln, unter der sich die einzelnen Werte für die Y-Achse befinden. Dies können, wie zuvor bei Chart.js, einer oder mehrere sein. Die Option labels definiert anschließend in der gleichen Reihenfolge wie zuvor ykeys, wie die jeweiligen Datensätze benannt werden sollen, wenn der Benutzer mit der Maus über einen der Balken fährt.

Ein entsprechender Tooltip wird automatisch erzeugt und kann mittels CSS den Bedürfnissen des jeweiligen Layouts angepasst werden. Der Inhalt des Tooltips kann durch die Vergabe der Labels sowie mithilfe eigenständiger Layoutfunktionen angepasst werden. Sie erlauben es, auch komplexe Werte korrekt in einem Tooltip zu rendern (hoverCallback).

D3.js

Die beiden Bibliotheken Chart.js sowie morris.js decken viele alltägliche Problemstellungen der Diagrammgenerierung ab. Beide sind bewusst einfach gehalten und unterstützen lediglich die nötigsten Konfigurationsoptionen. morris.js bietet hierbei durch die Integration von Tooltips ein Quäntchen mehr dynamische Datendarstellung als Chart.js. Oft ist dies bereits ausreichend zur gewinnbringenden Visualisierung von Daten.

Reichen handelsübliche Diagrammtypen jedoch nicht mehr aus, um eine spezifische Datenstruktur zu visualisieren, oder sind komplexe Benutzerinteraktionen vonnöten, so liefert D3.js [10] einen Werkzeugkasten mit allen nötigen Bestandteilen, um beeindruckende und präzise datenspezifische Repräsentationen zu erzeugen. D3.js ist mit 46 kb (minifiziert und gzip-komprimiert) ebenfalls kein Leichtgewicht. Die Library beinhaltet allerdings alle für die Verwendung relevanten Abhängigkeiten und bietet somit ein beeindruckendes Kosten-Nutzen-Verhältnis.

Daten- und webzentrische Visualisierung

D3.js ist ein auf Browser zugeschnittenes datenzentrisches Visualisierungstoolkit. Der Einstiegspunkt bei D3.js sind grundsätzlich die in beliebiger Form vorliegenden Daten. Es existieren keinerlei Limitierungen bei der Gestaltung der einzelnen Datensätze. Für das gewählte Beispiel werden die bereits bekannten Daten aus Listing 3 verwendet.

Der zweite Schritt nach der Betrachtung des Datenformats ist die Beschreibung von Operationen zur Transformation dieser Daten in ein beliebiges, auf dem DOM basierenden Zielformat. D3.js versteht sich demnach nicht strikt als eine Visualisierungsbibliothek, sondern vielmehr als Werkzeug, um Daten von einem Format (hier JSON) in ein anderes (z. B. SVG oder auch HTML) zu überführen. Sind komplexe graphische Darstellungen nötig, so bietet sich in den meisten Situationen SVG als Ausgabesprache an. Gelegentlich reichen jedoch auch bereits einfache Ansammlungen von HTML-Elementen oder eine Kombination aus SVG und HTML, um das gewünschte Darstellungsziel zu erreichen. Für die nötigen Transformationen der Daten existieren diverse Hilfsmethoden innerhalb der Bibliothek. Im Vergleich zu den zuvor vorgestellten Lösungen existieren jedoch keine fertigen Implementierungen üblicher Diagrammtypen – ist ein wie bisher eingesetztes Balkenbiagramm das Ziel, so muss selbst Hand angelegt werden.

Browserstatistiken etwas anders dargestellt

Abb. 4: Konzentrische Kreisdarstellung der Browserstatistik mittels D3.js

Abb. 4: Konzentrische Kreisdarstellung der Browserstatistik mittels D3.js

 

D3.js zeigt seine Stärken insbesondere bei unkonventionellen Darstellungsformen, für die keine fertige Bibliothek existiert. Das folgende Beispiel stellt die bekannte Browserstatistik als Menge von konzentrischen Kreisen dar, die durch ihren Radius die Menge der erfolgten Zugriffe abbilden (Abb. 4). Zusätzlich zu dieser Darstellung erlaubt es ein Überfahren mit der Maus, einen kleinen Tooltip anzeigen zu lassen, der den Namen des jeweiligen Browsers sowie den tatsächlichen Zugriffswert anzeigt.

Listing 4 zeigt die hierfür benötigte Implementierung auf der Basis von D3.js. Zu Beginn werden in den Zeilen 1 bis 8 einige Werte berechnet und definiert, die im Folgenden Anwendung finden. Hierbei handelt es sich um die Zielbreite der Darstellung in Pixeln sowie den maximalen Datenwert. Dieser Wert wird dann in Kombination mit einer linearen Skala eingesetzt, um eine Funktion scale zu erzeugen, die einen Wert aus den definierten Datasets entgegennimmt und ihn in einen Bereich zwischen 0 und dem Minimum von Breite und Höhe der Darstellung überführt. Somit existiert nun eine Funktion, die den Wertebereich der Eingabedaten in den Wertebereich der gewünschten Darstellungsform überträgt. Diese Art der Transformation ist für nahezu jede Anwendung von D3.js erforderlich. Aus diesem Grund stellt die Bibliothek diverse verschiedene Skalen und Umrechnungsfunktionalitäten für diesen Zweck zur Verfügung. Die API-Dokumentation [11] beschreibt detailliert, welche Möglichkeiten existieren und wie diese eingesetzt werden können.

var width = 1200;
var height = 600;

var maxValue = data.reduce(function(previous, current) {
  return Math.max(previous, current.oldSite);
}, 0);

var centerTranslation = 'translate(' + width / 2 + ',' + height / 2 + ')';

var scale = d3.scale.linear()
  .domain([0, maxValue])
  .range([0, Math.min(width, height) / 2]);

var tooltip = d3.select("#browser-statistics").append("div")
  .style("position", "absolute")
  .style("border", "1px solid #cccccc")
  .style("background", "#eeeeee")
  .style("padding", "10px")
  .style("display", "none");

var svg = d3.selectAll("#browser-statistics").append("svg")
        .attr("width", width)
        .attr("height", height)
    .append("g")
        .attr("transform", centerTranslation);

var circle = svg.selectAll("circle")
  .data(data)
  .enter().append("circle");

circle.attr("cx", 0)
  .attr("cy", 0)
  .attr("r", function(d) {
    return scale(d.oldSite);
  })
  .attr("fill", 'rgba(123,22,234,0.4)');

circle.on("mouseover", function(d) {
  tooltip.text(
    d.browser + ": " + d.oldSite
  ).style("display", "block");
});

circle.on("mousemove", function() {
  tooltip.style("top", d3.event.pageY + 15)
    .style("left", d3.event.pageX + 15);
});

circle.on("mouseout", function() {
  tooltip.style("display", "none");
});

Die Zeilen 14 bis 19 erzeugen ein Element innerhalb des üblichen Platzhalters mit der ID „browser-statistics“. Dieses neue Element wird absolut positioniert, erhält eine minimale Anzahl an Pixeln für die für dieses Beispiel erforderliche Formatierung. Es wird außerdem zunächst versteckt (display: none). Der Zweck dieses Elements wird im weiterführenden Quelltext die Verwendung als Container für den Tooltip des aktuell mit der Maus überfahrenen Kreises sein. Aus diesem Grund wird die Referenz auf das entsprechende Objekt auch in der Variablen tooltip gespeichert.

Als Vorbereitung auf die Erstellung der Kreise wird dem browser statistics Container in den Zeilen 21 bis 25 ein – und ein -Element hinzugefügt. Das -Element dient der Zentrierung aller Kreise im SVG-Dokument.

Die Zeilen 27 bis 36 beinhalten schließlich die nötige Magie, um das Diagramm zum Leben zu erwecken. Innerhalb des erstellen SVG-Dokuments werden alle circle-Elemente ausgewählt. Anschließend werden sie mit dem aus Listing 3 bekannten Datensatz verknüpft. Da innerhalb des Dokuments noch keinerlei circle-Elemente existieren, wird mittels Aufruf der enter()-Methode D3.js mitgeteilt, welche Operation zu erfolgen hat, wenn eine Repräsentation innerhalb der Daten existiert, die noch nicht im Ausgabemedium (dem SVG) abgebildet ist. Hier wird spezifiziert, dass in einem solchen Fall ein neues circle-Element erstellt und dem SVG hinzugefügt werden soll. Dieser Kreis wird in der Mitte des Dokuments platziert und erhält ein transparentes, lilafarbenes Aussehen. Der Radius des Kreises richtet sich nach der Anzahl der Besucher des aktuell behandelten Datensatzes. Um den Datenwert auf den Wert für die visuelle Darstellung umzurechnen, findet die zuvor definierte Funktion scale Anwendung.

Die Zeilen 38 bis 51 koppeln eine Behandlung von Mausereignissen mit jedem der erzeugten Kreise, um beim Überfahren der Kreise mit der Maus das zuvor erstellte tooltip-Element knapp unterhalb des Maus-Cursors zu positionieren und die gerade benötigten Daten darin zur Ausgabe zu bringen.

In diesem kurzen Beispiel wurden also bereits zwei verschiedene Ausgabetypen (HTML und SVG) miteinander gemischt. Die einzige Gemeinsamkeit dieser beiden Darstellungsvarianten ist die Möglichkeit, sie über DOM-Funktionen anzusprechen. Die Stärke von D3.js liegt in eben dieser Flexibilität.

Fazit

Es gibt eine Vielzahl von unterschiedlichen Bibliotheken zur Visualisierung von Daten in JavaScript. Die meisten von ihnen bieten vorgefertigte Darstellungen der bekanntesten Diagrammtypen. Mit zunehmender Interaktivität und Beeinflussbarkeit dieser Diagramme steigt logischerweise die Komplexität einer entsprechenden Bibliothek. Chart.js sowie morris.js versuchen eine Gratwanderung zwischen der Abdeckung der häufigsten Anwendungsfälle und einem einfachen und kompakten API. Beiden Projekten gelingt dieser schwierige Balanceakt ausgesprochen gut. Chart.js legt hierbei sehr großen Wert auf Kompatibilität und Bibliotheksgröße. Zu Gunsten dieser Eigenschaften verzichtet es vollständig auf Benutzerinteraktionsmöglichkeiten.

morris.js hingegen integriert ein dynamisches Tooltip-System, das in 90 Prozent aller Fälle ein ausreichendes Maß an Interaktivität bietet. Als Preis fordert diese Fähigkeit eine deutlich höhere Downloadgröße.

D3.js bietet Möglichkeiten der Visualisierung, die mit keinem anderen Framework derart bequem und kompakt umgesetzt werden können. Sind ausgefallene Darstellungen erforderlich oder ein hohes Maß an Interaktionsmöglichkeiten, ist diese Bibliothek die richtige Wahl. Diese enorme Flexibilität und Freiheit werden mit einem komplexeren und deutlich aufwendigeren API erkauft. Dennoch kann sich ein Blick auf diese Bibliothek lohnen – einmal von den Vorzügen gekostet möchte man sie nicht mehr missen.

Natürlich gilt es in allen Problemstellungen, das richtige Werkzeug für die jeweilige Aufgabe zu wählen. Jede der vorgestellten Bibliotheken besitzt eine Daseinsberechtigung in ihrem eigenen Anwendungsbereich und leistet exzellente Dienste.

Aufmacherbild: 3d donut chart von Shutterstock / Urheberrecht: mjaud

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -