Aufgabe 17 - Diagramme mit einer Bibliothek

Aufgabe 17 - Diagramme mit einer Bibliothek

Worum geht es?

Nicht alles selbst bauen: Sie binden eine echte Grafikbibliothek (Chart.js) ein und stellen Ihre Daten damit grafisch dar, allein anhand der offiziellen Dokumentation (siehe Kapitel Bibliotheken).

In dieser Übung üben Sie:

• Einbinden: eine Bibliothek per <script>-Tag/CDN verwenden.
• Doku lesen: aus fremder Dokumentation die nötigen Optionen herausziehen.
• Aufbereiten: eigene Datenstrukturen in das Format der Bibliothek bringen.

Benötigte Unterlagen

• VS Code, Browser,
• Chart.js-Dokumentation (Getting Started).

Arbeitsaufträge

Teil A - Hello Chart

1. Erstellen Sie eine Seite mit einem <canvas> und binden Sie Chart.js laut “Getting Started” ein.
2. Bringen Sie das erste Beispieldiagramm aus der Doku zum Laufen, und zwar unverändert. (Das ist der wichtigste Schritt: fremden Beispielcode lauffähig übernehmen.)

Teil B - Eigene Daten

1. Nehmen Sie Ihre Wetterdaten aus der 1. Klasse (Aufgabe 15) oder die Messwerte aus Aufgabe 08 dieses Jahres.
2. Stellen Sie die Woche als Balkendiagramm dar (Tage als Beschriftung, Temperaturen als Werte).
3. Schreiben Sie eine Funktion zeigeDiagramm(tage, werte, titel), damit die Aufbereitung wiederverwendbar ist.
4. Passen Sie über die Doku mindestens drei Optionen an (z. B. Titel, Farben, Y-Achse bei 0 beginnend).

Teil C - Bibliotheks-Steckbrief

Beantworten Sie kurz (je 1-2 Sätze): Unter welcher Lizenz steht Chart.js? Wie aktuell ist die letzte Version? Woran erkennen Sie, ob eine Bibliothek gepflegt wird? Welche Alternative zu Chart.js haben Sie bei Ihrer Recherche gefunden?

Abgabe

Projektordner mit lauffähiger Seite und dem Bibliotheks-Steckbrief als Kommentar oder Textdatei.