diff options
Diffstat (limited to 'index.js')
| -rw-r--r-- | index.js | 41 |
1 files changed, 40 insertions, 1 deletions
@@ -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. |