Du möchtest Diagramme nutzen?
Hier ist das Tutorial für Deine Webseiten und Apps!
Starten wir!
Warum Diagramme auf Deiner Webseite / App verwenden?
Wer einen Hammer als Werkzeug besitzt, für den sind alle Probleme Nägel.
Daten in Relation zu betrachten, über Zeitintervalle oder in Zusammenhängen ist in der Regel besser als die absoluten Zahlen auf einem Blatt Papier. Diagramme sind genial für visuelle orientierte Menschen. Zahlenkolonne alleine sind im 21. Jahrhundert nicht mehr genügend.
Probleme von Diagrammen + Lösungen
Diagramme sind oft mehr Fluch als Segen. Ich zeige Dir, was Du falsch machen kannst und die passende Lösung dazu.
1. Kein Diagramm
Die meisten Menschen können Zahlen kaum ohne Diagramme begreifen. Wenn wir die technischen Mittel haben, sollten wir uns Daten so gut wie möglich darstellen.
Lösung: Chart.js macht die Diagrammdarstellung sehr einfach. Überlege Dir, wo Diagramme in Deiner App Sinn ergeben und wie Du die Daten vorbereiten kannst.
2. Falscher Diagrammtyp
Es gibt viele Diagrammtypen, aber nur wenige oder ein Typ eignet sich für die Datenvisualisierung. Diagramme eignen sich super, um Betrachter zu verwirren. Auf der anderen Seite können Diagramme der Schlüssel für ein gutes Verständnis sein.
Lösung: Das Attribute type: "line" bestimmt den Diagrammtyp. Du kannst verschiedene Diagramme schnell ausprobieren. Trotzdem solltest Du Dir Gedanken machen, was Du darstellen willst:
- Verhältnisse = Tortendiagramm
- Trends = Liniendiagramme
- Häufigkeiten = Wortwolke
- Vergleiche = Balkendiagramme
3. Seltsame Skalen
Aktienanalysten nutzen den Skalen-Trick, um die absoluten Zahlen in Diagrammen zu polieren. Die Kurven erscheinen durch die Skalen dramatisch (Rendite +++ ) oder reduziert (Verluste).
Lösung: Die Software erlaubt Optionen zu Skalen Anpassung. Verwende diese, um die Daten sinnvoll darzustellen. Ziel ist es nicht den Betrachter zu verwirren oder in die Irre zu leiten, sondern die Daten ohne Verzerrung oder „Optimierung“ darzustellen.
options: {
scales: {
y: {
suggestedMin: 50,
suggestedMax: 100
}
}
}
4. Alte oder fehlende Daten
Diagramme sind nutzlos, wenn diese nur alte Daten zeigen, wenn Du heute Entscheidungen für morgen treffen willst.
Lösung: Eine gute API zu programmieren ist die Grundlage für sinnvolle Charts. Dazu habe ich schon mehrere Tutorials gemacht. Validiere die Daten, welche die Nutzer eingeben (z. B. Text statt Zahlen), um zu verhindern, dass das Diagramm nicht mehr darstellbar wird.
Reguläre Ausdrucke helfen die Daten im ersten Schritt zu validieren. Im nächsten Schritt solltest Du überprüfen, ob es sich um einen Ausreißer handelt. Die Darstellung leidet extrem, wenn die Software falsche oder nicht repräsentative Daten anzeigt.
5. Schlechte Farben
Nicht jeder von uns kann (alle) Farben sehen. Außerdem wollen wir nicht darüber diskutieren, ob wir Kategorie A in Dunkelgrau und Kategorie B in Hellschwarz einfärben.
Lösung: Wer soll Deine Diagramme nutzen können? Baue Optionen für mehr Inklusion ein. Erlaube den Nutzern dynamisch die Farben zu wählen (Rot-Grün-Schwäche) oder verwende stattdessen dicke und dünnen Linien.
{
label: "Expenses",
fill: true,
backgroundColor: "#ff000044",
borderColor: "#ff0000",
data: [342432, 23232, 2342, 23432],
},
6. Unleserlich und nicht responsive
Die Zahlen zu klein, die Linien zu dünn, die Skalen falsch gewählt.
Viele Gründe führen dazu, dass Diagramme nutzlos sind. Unsere digitale Welt beschränkt sich nicht nur auf einen 24-Zoll-Monitor, sondern Diagramme erscheinen auf Smartphones, Tablets oder Beamern. Diagramme müssen heutzutage sich automatisch in der Auflösung / Detailgrad anpassen, um jeden Bildschirm gerecht zu werden.
Lösung: Chart.js passt sich an die Umgebung an. Definiere eine Leinwand, die sich dynamisch anpasst. Der Betrachter kann nicht erwarten, dass alle Details auf einem Smartphone-Bildschirm erscheinen, wie auf einem 75-Zoll-8K-Monitor. Die Skalen und Daten blendet Chart.js je nach Platz dynamisch ein. Die Erkennung von Änderungen der Leinwandgröße kann nicht über das Canvas-HTML-Element erfolgen. Chart.js verwendet den übergeordneten Container, um die Daten auf der Leinwand zu aktualisieren. Diese Methode erfordert, dass der Container relativ positioniert und nur für die Diagrammleinwand bestimmt ist. Die Reaktionsfähigkeit kann dann durch die Einstellung relativer Werte für die Containergröße erreicht werden:
<div class="chartContainer" style="position: relative; height:50vh; width:74vw">
<canvas id="chart" #chart></canvas>
</div>
7. Nicht interaktiv
Gedruckte Diagramme sind eine große Herausforderung. Wer nicht auf DIN-0 drucken kann, muss wichtige Informationen auslassen. Der Nutzer möchte nicht nur die Diagramme anschauen, sondern mit den Daten interagieren und arbeiten. Jeder Datenpunkt soll weitere Informationen preisgeben und weitere Daten interaktiv anzeigen.
Lösung: Die Chart-Software chart.js kann Legenden und Datenpunkte nach Bedarf einblenden. Die Chart.js Interactions sind fortgeschrittene Funktionen, welche Klick-Events auf Datenpunkte erlauben. Diese Funktion ist praktisch, um mehr Informationen zur Verfügung zustellen.
Chart.js Tutorial
Zuerst installieren die das Node-Modul
npm install chart.js
Damit Angular weiß, woher der Programmcode geladen werden soll, müssen wir an Anfang der .ts Datei verweisen.
Bei Chart.js brauchen wir als Grundlage eine Leinwand, die die Browser Engine bemalen kann. Hier geben wir nur die Höhe und Breite an. Diese sollte möglichst mit dynamischen Werten bestückt sein, weil die Leinwand sich dynamisch an die das Display orientieren soll. Füge den folgenden Tag in Deine Webseite oder App ein:
<div class="chartContainer" style="position: relative; height:50vh; width:74vw">
<canvas id="chart" #chart></canvas>
</div>
Der Hashtag #chart hilft später in der .ts Datei auf die Leinwand zu verweisen. Wo soll das Diagramm generiert werden?
import { Chart, registerables } from "chart.js";
Nach der Klasse export class Tab2Page { kommt jetzt der Verweis auf die Leinwand (#chart)
@ViewChild("chart", { static: true }) chart:Chart;
Um ein Diagramm anzuzeigen brauchen wir Daten. Für das folgende Liniendiagramm brauchen wir 3 Datenreihen: Die Jahre [2020, 2021, 2022, 2023] (als Skala / Marker), Ausgaben in Euro und Budget in Euro. Diese musst Du Dir von Deiner API via Angular HTTP ziehen. Wenn Du statischen Daten nutzen willst, kannst Du wie folgt vorgehen:
var chart = new Chart(chartElementRef.nativeElement, {
type: "line",
data: {
labels: [2020, 2021, 2022, 2023],
datasets: [
{
label: "Expenses",
fill: true,
backgroundColor: "#ff000044",
borderColor: "#ff0000",
data: [342432, 23232, 2342, 23432],
},
{
label: "Year Budget",
fill: true,
backgroundColor: "#ffffff44",
borderColor: "#ffffff",
data: [23020, 4234, 32422, 23422],
},
],
},
options: {
maintainAspectRatio: false,
},
});
Jede Datenreihe hat ein Label bzw. einen Platz in der Legende, eine Hintergrundfarbe – die Fläche fill: true unter der Linie und die Farbe der Linie borderColor: "#ff0000" selbst. Ästhetisch ist es oft, die gleiche Farbe für Linie und Fläche zu nehmen und die Fläche 50 % backgroundColor: "#ff000044", transparent zu füllen. Achte darauf das die Farben sich gut unterscheiden lassen und die Transparenz ausreicht, um die 2. Linie unterhalb zuerkennen.
