In der Anleitung werden die Werte exemplarisch z-normiert - es wird also zunächst der (aus der Skalenentwicklung bekannte) Mittelwert subtrahiert und anschließend der Wert durch die (ebenfalls a-priori bekannte) Standardabweichung dividiert.
$zValue = ($value - 5) / 2.8;
Sofern eine z-Verteilugn vorliegt, liegen dann ca. 99% der Werte im Bereich von -3 bis +3.
Dieses Vorgehen ist generell für alle Skalen möglich. Aber natürlich nicht die einzige Möglichkeit zur Darstellung eines Ergebniswerts.
Die Maße, die in dem HTML-Teil verwendet werden (width: 65px), beschreiben den Bereich von 0 bis 1:
<div style="position: absolute; top: -2px; left: 50%; width: 65px; height: 27px">
Hier müssen Sie also im ersten Schritt anpassen, damit die Angaben zu der von Ihnen verwendeten Grafik passen. Es ist hier ebenso möglich, dass Sie den Bereich über die gesamte Skala laufen lassen, sodass 100% ganz rechts ist und 0% ganz links.
<div style="position: absolute; top: -2px; left: 10px; width: 400px; height: 27px">
Die 10px und 400px sind hier nur exemplarisch und müssen auf Ihre Skala (das Bild) angepasst werden.
Wenn Sie den bereich besser sehen möchten, geben sie ihm erstmal einen sichtbaren Rahmen (border):
<div style="border: 1px solid red; position: absolute; top: -2px; left: 10px; width: 400px; height: 27px">
So weit so gut. Jetzt zu den Werten. Nehmen wir an, Ihre Wertebereich liegt bei 10 bis 50. Dann skalieren Sie diesen wie folgt auf den Bereich 0 bis 100.
$wert100 = ($wert - 10) / 40 * 100;
Und diesen Wert können Sie - wenn Sie den kompletten Bereich Ihre Abbildung nutzen - direkt in den Platzhalter schreiben.
'%zValue100%' => (string)round(($value - 10) / 40 * 100)
Und nein, ChatGPT kann nur Standard-Aufgaben. Sobald es spezifischer wird, ist ein Sprachmodell zum Programmieren herzlich ungeeignet ;)