Balkenelement f. Webseite?

HTMLernIng Gast #6884677
Lesenswert?
• ▲
▼ 
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!
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Andre Gast #6884685
Lesenswert?
• ▲
▼ 
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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt. Bitte hier nur auf die ursprüngliche Frage antworten, für neue Fragen einen neuen Beitrag erstellen.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.