Wie Sie Zahlen dynamisch im Internet erstellen und darstellen

mit Keine Kommentare

Wollen oder müssen Sie Zah­len gra­fisch und gege­ben­en­falls ani­miert dar­stellen? Wie ver­wen­den Sie Gra­fiken wie Bal­ken­dia­gram­me und ähnliche auf Ihrer Website? Exportieren Sie diese von einer Tabellen­kal­ku­lation? In die­sem Fach­bei­trag zeige ich Ihnen einige Va­rian­ten. Gerade im Internet lassen sich Dia­gram­me bestens ani­mie­ren.

Informationen gemäss Stand vom 15.4.2023

Diagramm erstellenBild: David Schwarzenberg auf Pixabay.com

Aber wie vor­ge­hen?

Konventionell

Viele Programme auf den Des­ktops ar­beiten mit Zahlen. Diese lassen sich zum schnel­le­ren Verständnis oftmals gra­fisch in Form von Kreis, Bal­ken- oder Linien­dia­grammen anzeigen. Meistens können Sie diese ex­por­tieren, kompri­mieren und auf Ihrer Website verwenden. Allerdings sind solche Dia­gramme oft­mals etwas lang­weilig. Deshalb stelle ich Ihnen hier weitere Alter­nativen vor.

Diagramm in we­nigen Mi­nu­ten er­zeugen mit Live­gap

Mit diesem praktischen, auch deutsch­sprachigen Online-Tool können Sie kos­tenfrei Ihre Dia­gramme erstellen, ani­mie­ren, speichern und in einer live Vor­schau betrachten. Es gibt ein Pro Version, die mit 5$ pro Monat noch einige weitere Op­tio­nen bietet.

Es stehen mehr als 50 Vorlagen bereit, so beispielsweise, Linien-, Flächen-, Balken-, Kuchen-, Do­nut-, Polar­ge­biets­karte, Schritt-, Ra­dar­kar­te-Dia­gramm.

Das Diagramm kann als Grafik, Film oder per HTML-Code ge­speichert werden.

charts.livegap.com

JustGage (E)

JustGage ist ein praktisches, kosten­freies JavaScript zum Erzeugen und Animieren von schönen und saube­ren Mess­instru­men­ten. Es basiert auf der Rap­haël-Bi­bliothek für Vektor­zeich­nun­gen, ist also völlig auf­lö­sungs­unab­hän­gig und passt sich selbst an. Ach ja, da es reines SVG ist, funktioniert es in fast je­dem Brow­ser.

Wie verwende ich es?

  • Binden Sie die Skripte JustGage und Raphael in Ihre Web­seite ein.
  • Erstellen Sie ein div mit id, Breite und Höhe
  • Aufruf von ‘justGage({id, wert})’

Dies ist die einfachste Variante. Haben Sie Lust, sich die Hände schmutzig zu machen? Es gibt noch mehr Schrau­ben und Muttern, mit denen Sie herum­spie­len können – sehen Sie sich die Demos an, um zu sehen, was Sie durch die Anpas­sung der Se­tup-Pa­ra­meter alles machen können.

JustGage passt sich automa­tisch an die Grösse des ent­hal­tenen Elements an. Und an die Zoom­stufe des Bild­schirms. Und der Bildschirm­dichte. Sehr schön. Das be­deutet, dass Sie jederzeit eine saubere, scharfe und gut aus­sehende Anzeige erhalten. Ver­suchen Sie, die Seite zu zoomen, um das Er­geb­nis zu sehen.
toorshia.github.io/justgage/

Justgage

Sie erhalten vom Online-Tool den Code, den Sie einfach in Ihre Website inte­grie­ren.

Zahlen grafisch dar­stellen mit Amcharts (E)

Sie sind hier, um Ihre nächste Charting-Bibliothek zu finden? Das ist gut. Diese Diagramme wurden so konzipiert, dass sie sich modern, schlank und schnell anfühlen, und zwar sofort nach dem Auspacken. Sehen Sie sich die De­mos an und verlieben Sie sich in sie.

Und das Beste ist, dass die Biblio­theken nativ mit TypeScript, Angular, React, Vue und einfachen JavaScript-An­wen­dun­gen inte­griert werden können.

Und schliesslich wurde die Lizen­zie­rung super­einfach gemacht – ein Produkt – vier einfache Lizenzen. Kein Ärger mehr mit Entwicklern, Servern, Domains oder Pennys unter der Couch.

Integriert mit Ihrem CMS
Sie können amCharts Editor 4 einfach und nahtlos in Ihr Con­tent-Mana­gement-Sys­tem inte­grieren und Ihren End­an­wen­dern die mühe­lose Erstellung und Bear­beitung von Dia­grammen ermög­lichen. Kontrollieren Sie die zu­gäng­lichen Funk­tio­nen und deren Konfi­guration.



amcharts.com

Diagramm kos­ten­los er­stellen mit Hohli (E)

Füllen Sie ein Formular mit Ihren Daten aus und spielen Sie mit den Optionen. Das Diagramm kann anschliessend per Link oder Iframe in Ihre Webseite eingebaut werden. Einfacher geht es nicht mehr. Ändern sich die Daten, müs­sen Sie allerdings ein neues Diagramm erstellen.

charts.hohli.com

Bitte klicken, ver­wandte Bei­träge

Autor: Walter B. Walser, kundennutzen.ch