ist ein open polygon nur mit CSS /HTML möglich?

[Gunnar Bittersmann]

@@TS

Die Messpunkte selber sind doch kein Problem

Messpunkte? Ah, du willst ein Liniendiagramm. Sag das doch gleich, nicht sowas wie „open polygon“.

sondern die Verbindungslinien dazwischen.

Sind auch nicht so’n Problem. Ein HTML-Element für eine Verbindungslinie, die man mit linear-gradient hinbekommt. djr deutete es an.

☞ Ich hab da mal was gebastelt.

Die n − 1 Elemente (bei n Messpunkten) werden per JavaScript generiert. Ansonsten tut das Script kaum mehr als die Argumente (Zeitpunkte t) und Messwerte (x) in custom properties zu schreiben und Minimum und Maximum der Argumente und Messwerte zu ermitteln. Die Berechnung der Position erfolgt dann im CSS, bspw:

	left: calc(
		var(--width) * (var(--t1) - var(--tmin)) / (var(--tmax) - var(--tmin))
	);

Obwohl, doch: bei der Darstellung kann man nicht die „obere“ Kante unter die „untere“ legen und darauf spekulieren, dass die Box trotzdem angezeigt wird, nur halt auf dem Kopf stehend. Deshalb bekommen die Elemente eine Klasse "up", "down" bzw. "const" verpasst, über welche die Richtung des Gradienten geregelt wird.

Bei konstantem Verlauf fallen obere und untere Kante zusammen. Damit vom Strich was zu sehen ist, bekommt die Box negativen margin. Um eine halbwegs durchgehende Linie zu erreichen, bekommen die "up"- und "down"-Boxen den auch.

Dadurch wird der Anstieg der Linie leicht verfälscht. Man müsste die Werte für horizontalen und vertikalen Abstand aus dem Anstieg berechenen – aber das wäre dann schon höhere Schule.

Die Beschriftung des Diagramms überlasse ich dir. Das Beispiel zeigt den vorhergesagten Temperaturverlauf für hier und heute.

LLAP 🖖