Balkendiagramm mit CSS
0 
Take
Balkendiagramm mit CSS
Hallo
Ich überlege gerade, ob ich ein in php erstelltes Balkendiagramm (mit senkrechten Balken) auf CSS umstellen soll. Dabei handelt es sich um ein Bild, das beim Abruf per php als Grafik erstelllt wird, mit Daten aus einer Datenbank. Ich erhoffe mir da vor allem auf Smartphones eine schnellere Ladezeit.
Vor allem eine Übersicht von Monats/Jahresdaten (also mit 31 oder 12 Balken drin) würde sich vielleicht als CSS anbieten. Nur find ich darüber recht wenig, das meiste was ich finde hat irgendwie noch JS mit drin, oder es werden Grafiken in die entsprechende Länge gestreckt.
Ich denke an reines CSS, durch das divs oder irgendwas in entsprechender Höhe dargestellt werden.
Wie könnt ich denn an sowas rangehen? Eine Tabelle mit 12 Zellen, in die dann verschieden hohe divs gesetzt werden? Oder nur mit CSS layouten?
Oder was ganz anderes wie Canvas einsetzen? (da wär dann Script dabei, weiß ich)
Ich hab sowas grafisches bisher noch nicht in dem Maß gemacht und suche da den brauchbarsten Ansatz. Danke für Tips!
-
Moin,
Also ich würde das ja so machen: http://www.braekling.de/web-design/3230-htmlcss-balkendiagramm-barrierefrei.html. Ist dann auch barrierefreier als ein (von PHP generiertes) Bild und hat auch eine semantisch sinnvollere Struktur.
Gruß,
Take-
Ja das sieht schon mal hübsch aus.
Aber da muss ich noch einiges ausmisten, der Quellcode davon ist ja furchtbar.
So viel Unübersichtlichkeit, nur um ein paar Kästchen auszurichten?-
Ja das sieht schon mal hübsch aus.
Ja, viel Schminke aber nichts drunter :)
Aber da muss ich noch einiges ausmisten, der Quellcode davon ist ja furchtbar.
So viel Unübersichtlichkeit, nur um ein paar Kästchen auszurichten?
Bevor du dir diesen Mist antust, sieh' dir lieber an wie man es ordentlich macht:
Accessible Data Visualization with Web Standards
-
-