Google Gauges selber bauen

[Cool Master]

Moin,

ich habe mal zum testen ein wenig mit den Google Gauges gespielt.:

https://developers.google.com/chart/interactive/docs/gallery/gauge

Leider ist es nicht ganz zu meiner Zufriedenheit (da man immer im Netz sein muss). Meine Frage deswegen wie kann ich sowas am besten umsetzen? Das ganze soll auf HTML5/CSS3/JS Basis laufen. Was ich bis jetzt schon herausgefunden habe ist das ich aufjedenfall das Canvas Element brauche. Aber wie erstelle ich so eine Grafik wie in dem Tacho inkl. den Strichen? Das ganze muss nicht dynamisch sein, so wie auf der Google Seite es werden nur 3 Zahlen addiert und ein % Wert ausgerechnet (das ganze 3 mal, Daten kommen aus einer MySQL DB).

Hoffe ihr könnt mir da helfen

 

[ice-breaker]

Auf ein Canvaz kannst du malen, also kannst du einfach den Tacho nachmalen. Oder du nimmst eine Grafik malst die auf den Canvas und malst dann nur noch deine Tachonadel drüber.
Oder du nimmst eine der vielen fertigen Bibliotheken oder oder oder


Wie du siehst gibt es dutzende Wege auf deine Frage zu antworten

 

[Daaron]

Bau dir den Tacho als SVG, z.B. in Inkscape. Danach manipulierst du per JS nur den Zeigerausschlag per CSS3-Rotation. Das dürfte in nem Dutzend Zeilen Code (+SVG) erledigt sein, läuft auf allen Browsern >=IE9 und lässt sich nahtlos in HTML5-Dokumente einbetten.

 

[Cool Master]

Ok die Lösung von Daaron hört sich schon mal gut an! Danke für den Tipp mit dem Programm Jetzt kommt es nur wieder auf meine super "Paint Skillz" an

 

[Daaron]

N paar Kreise ziehen wird ja noch klappen *G*
Ansonsten: http://openclipart.org/detail/153583/car-dashboard-by-rob-fenwitch

 

[Cool Master]

Waren ja nicht nur ein paar Kreise Ergebnis ist im Anhang:

Die Nadel kann ich - soweit ich das richtig gelesen habe per CSS definieren oder?

 

[Daaron]

Na ja, die Nadel solltest du ebenfalls als eigenständiges Element innerhalb der SVG machen. Du gibst diesem Element lediglich eine ID. Danach musst du sie nur über CSS rotieren, in etwa mit "-webkit-transform:rotate(120deg);" (120° im Uhrzeigersinn, für Webkit-Browser)
Der Trick mit SVG ist: Es fügt sich nahtlos in den restlichen DOM der Webseite ein. Du kannst über CSS die ID der Nadel genau so ansprechen, wie du es mit mit der ID eines <div> oder einer Select-Box machen würdest.

 

[Cool Master]

Ah ok, also hat es doch Sinn ergeben allen Elementen eine ID bzw. Gruppe zu verpassen