SVG Grid und Datendarstellung

[Rolf B]

Hallo Helmut,

SVG ist dafür eigentlich ein recht unkomplizierter Geselle.

Eigentlich musst Du nur

• den SVG Rahmen eröffnen
• das Koordinatensystem zeichnen
• wahlweise einen Path entlang der Messpunkte oder die Balken zeichnen
• den SVG Rahmen wieder schließen.

Ich nehme an, dass dein Diagramm ein vorgegebenes Breiten/Höhe-Verhältnis haben soll. Ein solches Verhältnis automatisch zu skalieren geht zwar, wenn man dem svg Element preserveAspectRatio="none" gibt, aber dann verzerrt es auch die Linienbreiten und ggf. deine Achsenbeschriftungen. Deshalb würde ich das lassen und beim Default bleiben (xMidYMid meet).

Wenn Du bspw. ein Verhältnis Breite/Höhe von 4:3 haben willst, setzt Du eine viewBox von "0 0 1000 750". Darin platzierst Du dann deine Elemente, so dass sie ordentlich aussehen.

Das ist letztlich nur eine blöde Koordinatenumrechnerei, weil die Y-Achse bei SVG entgegengesetzt zur Y-Achse eines mathematischen Koordinatensystems orientiert ist. Und dein Y=0 liegt mitten im SVG. Bei deinem Wertebereich müsste dein "logisches y=0" also bei der SVG-Koordinate 500 liegen. Und weil Du ja vermutlich Platz zum Malen der Y-Achse brauchst, musst Du Dir links im Bild ein paar Punkte dafür freihalten. Z.B. 100 Punkte. Das hängt vom Font ab und dem, was Du da hinschreiben willst. Diese Breite musst Du auf das x draufaddieren.

Das ist alles machbar, nur nervig. Am besten machst Du Dir eine Funktion, die eine beliebige logische Koordinate in SVG-Koordinaten umrechnet, operierst beim Plotten strikt im mathematischen Koordinatensystem und rechnest jeden Punkt mit dieser Funktion in SVG Koordinaten um.

Rolf