Auf Canvas - Objekte mit Mausevents zugreifen

[Gunnar Bittersmann]

@@uwe gutwirth

mein erster Versuch:mein erster Versuch Mein Problem: wie bekomme ich die balken an den unteren Rand der div?

Nicht floaten, sondern flexen.

#fer0 {
    /* position: relative; */
    display: flex;
    align-items: flex-end;
}

Die Auskommentierung von position: relative; meint, dass das weg kann.

Die Breite der Balken kannst du dann mit flex angeben, dann werden sie automatisch schmaler, wenn es mehr werden:

.b1 {
    /* float: left; */
    background-color: yellow;
    /* width: 20px; */
    /* bottom: 0; */
    /* vertical-align: bottom;
    height: 100px;
    margin-right: 5px;
    flex: 0 1 20px;
}

Willst du margin-right wirklich auch beim letzten Balken?

height ist nur zur Veranschauung für die Balken ohne Werte und kommt dann auch weg, nicht wahr?

Überhaupt ist es nicht schön, die Höhen im Markup mit style="height: 80px" anzugeben. Schreib da die Daten in einer custom property rein: style="--value: 8". Im Stylesheet dann:

.b1 {
    height: calc(var(--value) * 10px);
}

Dann kannst du die Skalierung an einer Stelle für alle Balken ändern. Statt --value kannst du auch einen anderen Namen nehmen, der deine Daten besser beschreibt; er muss nur mit -- anfangen.

und dann auf jeden Balken das event mouseover & click legen um diesen dann hervorzuheben und Details anzuzeigen.

Nein!! Das wird nichts. divs sind keine interaktiven Elemente. Man kann da was für Mausschubser machen, sperrt aber alle anderen Nutzer aus, die eine Webseite nicht per Maus, sondern z.B. mit Tastatur bedienen. Wenn du Aktionen ausführen willst, brauchst du <button>s.

😷 LLAP