Balkenelement f. Webseite?

[HTMLernIng (Gast)]

liebes Schwarmwissen,

der andere Thread Beitrag "Frage zu Excel - Balken in Zellen" hat meine 
Neugierde angestachelt: ich würde gerne sowas ähnlicher für HTML5 haben.

Mit welchen Stichworte soll ich weitersuchen, wenn ich "ein 
Balkenelement" für Webseiten finden will?

Also ein rechteckiges Feld das z.b. eine Tabellenzelle TD ausfüllt und 
gemäß angegebenem Parameterwert z.B. 0.0...1.0 oder 0...100 und 
laufrichtung (N/E/S/W o.ä) und Farbe den entsprechenden proportionalen 
Teil eingefärbt zeigt.

Geht das mit ausschliesslich HTML5 oder nur mit Hilfe von JavaScript?

Wenn JS: bekomme ich bitte etwas Starthilfe, die ich weiter verfeinern 
kann? Oder liegt in den weiten des Netzes gar schon was 
gebrauchsfertiges rum?

Danke im voraus!

[Andre (Gast)]

HTMLernIng schrieb:
> Also ein rechteckiges Feld

Ganz simpel gedacht: Ein div Element mit widht=0..100% sollte das 
können. Wahrscheinlich musst du das mit etwas CSS noch verfeinern, z.B. 
Ränder wegnehmen und hinter den Inhalt legen.

Javascript Balkendiagramme gibt es haufenweise fertig, z.B.
https://www.chartjs.org/docs/latest/samples/bar/horizontal.html

Die kannst du sicher auch auf deine gewünschte Darstellung anpassen.

[Pandur S. (jetztnicht)]

<td width="30">

[Einer (Gast)]

<div style="width: 200px; background: silver">
  <div style="width: 60%; height: 20px; background: green"/>
</div>

[HTMLernIng (Gast)]

Dankesehr für den "Schuhlöffel", damit kann ich einsteigen!

Auf den Ansatz mit dem an sich unsichtbaren Element DIV etwas sichtbares 
zu schaffen wär ich nicht so schnell gekommen.