nicht angemeldet
Projektdauer in Form eines Kreises
Der Martin
Gunnar Bittersmann
Matthias ApselMoin,
eine Frage wie ihr folgendes umsetzten würdet:
Auf meiner Seite gibt es ein Bereich der nennt sich „Projektziel“ Bei 100% soll ein Kreis vollständig geschlossen sein, bei 50% nur halb usw. Muss ich dafür jetzt 100 Grafiken erstellen oder lässt sich hier etwas dynamisches mit CSSS erstellen? Was mit ehrlich gesagt am liebsten wäre.
-
Hallo,
Auf meiner Seite gibt es ein Bereich der nennt sich „Projektziel“ Bei 100% soll ein Kreis vollständig geschlossen sein, bei 50% nur halb usw.
nennt sich auch Tortendiagramm. ;-)
Muss ich dafür jetzt 100 Grafiken erstellen oder lässt sich hier etwas dynamisches mit CSSS erstellen? Was mit ehrlich gesagt am liebsten wäre.
Eine CSS-Lösung kann ich mir nicht vorstellen (was nicht unbedingt etwas heißen muss).
Ich würde die Grafik serverseitig generieren. Entweder als SVG, oder mit der gd-lib als gewöhnliche Pixelgrafik.
So long, Martin
--
Wenn ein Räuber eine deutsche Amtsstube überfällt, welchen Satz kann er sich dann sparen? "Keine Bewegung!" Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
Such nach "css pie chart". Macht einen etwas (nicht sehr!) aufwendigen Eindruck aber funktioniert. Alternativ dazu könntest du evtl. mit SVG was anfangen, oder du lässt serverseitig ein Bild zeichnen.
-
Ich würde es im Frontend dynamisch mit JS machen. Wobei der Wert natürlich serverseitig irgendwo ins Dom geschrieben wird.
Beispiel: http://anthonyterrien.com/knob/ siehe "readonly" Beispiel.
Google: Progress indicator
Auf keinen Fall hardgecodete Bilder erstellen!
Cheers, Baba
--
Baba kommt von Basketball -
@@Jnnbox:
Auf meiner Seite gibt es ein Bereich der nennt sich „Projektziel“ Bei 100% soll ein Kreis vollständig geschlossen sein, bei 50% nur halb usw.
Das passende HTML-Element dafür ist das progress-Element (das für AT auch schon die entsprechende Rolle zugewiesen bekommen hat).
Bei quadratischen Abmessungen sollte das progress-Element als Tortengrafik gerendert werden. (Firefox und IE 10 tun das noch nicht.)
Muss ich dafür jetzt 100 Grafiken erstellen oder lässt sich hier etwas dynamisches mit CSSS erstellen? Was mit ehrlich gesagt am liebsten wäre.
Nein, SVG (inline im HTML) wäre das Mittel der Wahl (wenn du nicht mit der Darstellung als Balkendiaramm leben kannst). Mit Fallback auf das progress-Element, dieses wiederum mit Fallback auf Text:
[code lang=php]<?php // $p ist der Anteil, liegt im Intervall [0, 1] ?><body> <svg viewBox="-1.1 -1.1 2.2 2.2" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle r="1"/><?php if ($p > 0): ?><path d="M0,0 L0,-1 A1,1,0,<?= $p > .5 ? 1 : 0 ?>,1,<?= sin(2 * M_PI * $p) ?>,<?= -cos(2 * M_PI * $p) ?>z"/> <?php endif; ?> <progress value="<?= $p ?>"><?= $p * 100 ?>%</progress> </svg> </body>[/code]Gestylt werden kann das so:
svg { max-width: 100%; max-height: 100%; } circle { stroke: gray; stroke-width: 0.05; fill: none; } path { stroke: rebeccapurple; stroke-width: 0.05; fill: rebeccapurple; }LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Bei quadratischen Abmessungen sollte das progress-Element als Tortengrafik gerendert werden. (Firefox und IE 10 tun das noch nicht.)
Tut es überhaupt ein Browser?
Matthias
-
@@Matthias Apsel:
Bei quadratischen Abmessungen sollte das progress-Element als Tortengrafik gerendert werden. (Firefox und IE 10 tun das noch nicht.)
Tut es überhaupt ein Browser?
Auch Chrome habe ich negativ getestet. Vermutlich also nicht. Da war wohl der Wunsch Vater der Spezifikation.
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Auch Chrome habe ich negativ getestet. Vermutlich also nicht. Da war wohl der Wunsch Vater der Spezifikation.
Ich kann auch noch den IE11, den aktuellen Opera sowie FF nightly als negativ getestet hinzufügen.
Matthias
-
-
-
