diff options
| -rw-r--r-- | Makefile | 4 | ||||
| -rw-r--r-- | index.js | 41 | ||||
| -rw-r--r-- | index.php | 4 | ||||
| -rw-r--r-- | package-lock.json | 12 | ||||
| -rw-r--r-- | package.json | 3 |
5 files changed, 59 insertions, 5 deletions
@@ -1,4 +1,6 @@ -JS := node_modules/chart.js/dist/chart.umd.js node_modules/chart.js/dist/chart.umd.js.map index.js +JS := node_modules/chart.js/dist/chart.umd.js node_modules/chart.js/dist/chart.umd.js.map \ + node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.min.js \ + index.js PHP := index.php lade_daten.php config.php CSS := index.css @@ -29,6 +29,7 @@ // wenn die Seite komplett geladen wurde window.onload = function() { zeichne(); + zeichneBilder(); listeEvents(); } @@ -49,7 +50,7 @@ function zeichne() { if (diagramm) diagramm.destroy(); // Erzeuge ein neues Balkendiagramm mit unseren Daten - chart = new Chart(ctx, { + diagramm = new Chart(ctx, { type: 'bar', options: { animation: false, // Deaktiviere die Animation beim Zeichnen der Balken @@ -80,6 +81,44 @@ function zeichne() { zeichenort['aria-busy'] = false; } +// Lade und zeichne die Bilder der Klassen an die Spitze ihrer jeweiligen Balken +async function zeichneBilder() { + // Das Objekt, das alle unsere Bilder Annotationen enthält + let annotation = {annotations: {}}; + for (const i in daten.klassen) { + let klasse = daten.klassen[i]; + // Die Url des Klassenbildes ist der Klassenbezeichner unter dem Bilderpfad + let bildUrl = `${bilder_pfad}/${klasse.bezeichner}.png`; + + // Teste ob das Bild existiert + let ok = (await fetch(bildUrl, {method: 'HEAD'})).ok; + // Das Bild existiert nicht + if (!ok) { continue; } + + // Erzeuge ein neues Bild und verwende die Bild URL unter der ein Bild gefunden wurde + let bild = new Image(); + bild.src = bildUrl; + + // Zeichne das Bild knapp unter dem oberen Rand des Balkens + let klassenAnnotation = { + drawTime: 'afterDatasetsDraw', + type: 'label', + content: bild, + width: 75, + height: 75, + xValue: klasse.bezeichner, + yValue: klasse.punkte - 1 + }; + + annotation.annotations[klasse.bezeichner] = klassenAnnotation; + } + + // Ergänze die Diagramm-Optionen um unsere Annotationen + diagramm.options.plugins.annotation = annotation; + // Zeichne das Diagramm neu mit unseren Annotationen + diagramm.update(); +} + // Erzeuge eine Liste aller Ereignisse. // Die globale Variable ereignisse muss definiert sein und ein Iterable aller // Ereignisse, die angezeigt werden sollen, enthalten. @@ -9,8 +9,9 @@ <!-- Lade den CSS Code, der das Aussehen der Seite definiert --> <link rel="stylesheet" href="index.css"/>` - <!-- Lade die Daten für den Jahrgang und das Schuljahr aus der Datenbank --> + <!-- Die Daten für den Jahrgang und das Schuljahr aus der Datenbank --> <?php + // Lade die Daten für den Jahrgang und das Schuljahr aus der Datenbank $QUERIES = array(); parse_str($_SERVER['QUERY_STRING'], $QUERIES); @@ -53,6 +54,7 @@ <!-- Lade die benötigten Javascript Dateien --> <script src="js/chart.umd.js"></script> + <script src="js/chartjs-plugin-annotation.min.js"></script> <script src="js/index.js"></script> </head> diff --git a/package-lock.json b/package-lock.json index 2a3fb6e..f8c98b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.1", "license": "ISC", "dependencies": { - "chart.js": "^4.4.0" + "chart.js": "^4.4.0", + "chartjs-plugin-annotation": "^3.1.0" } }, "node_modules/@kurkle/color": { @@ -29,6 +30,15 @@ "engines": { "pnpm": ">=8" } + }, + "node_modules/chartjs-plugin-annotation": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.1.0.tgz", + "integrity": "sha512-EkAed6/ycXD/7n0ShrlT1T2Hm3acnbFhgkIEJLa0X+M6S16x0zwj1Fv4suv/2bwayCT3jGPdAtI9uLcAMToaQQ==", + "license": "MIT", + "peerDependencies": { + "chart.js": ">=4.0.0" + } } } } diff --git a/package.json b/package.json index c6a01d6..8df9fd1 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "author": "Florian Fischer", "license": "ISC", "dependencies": { - "chart.js": "^4.4.0" + "chart.js": "^4.4.0", + "chartjs-plugin-annotation": "^3.1.0" } } |