Nicht lineare "progressbar" % berechnen

[machhommy]

Ich habe eine Art Progressbar/Bonusleiste oder wie auch immer man diese nennen möchte, die ich je nach Punktestand füllen möchte. Die Progressbar geht von 0 -100 % und hat 3 Meilensteine die man erreichen kann. Allerdings liegen die Meilensteine nicht absolut auf der Leiste und stimmen somit nicht mit den Prozenten der Leiste überein. Das heißt ein simpler Dreisatz funktioniert hier nicht um die Leiste entsprechend zu füllen. Gibt es eine Möglichkeit dieses Unterfangen mit einer Mathematischen Formel zu lösen?

Ich habe 3 Breakpoints (die Meilensteine) und könnte mit drei Dreisätzen je nach Bereich arbeiten aber auch das geht sich nicht aus. Ich hänge mal ein Bild mit an damit es besser verstehen kann.

Wie man sieht machen die ersten 20 Punkte nur 17 % der Leiste aus. Die nächsten 30 Punkte machen 23 % aus und die nächsten 50 Punkte machen wiederum 23 % aus. Und dann gibt es noch den Endstück von 17 % welches sozusagen in leere läuft. Gut das Endstück könnte ich die 100 Punkte Marke reduzieren und dann erweitern sobald ein Wert von p = 100 erreicht wurde. Das ganze ist ein läuft in Smarty (Template) und Javascript (dynamisches füllen der Leiste).

Gegeben ist immer der Punktewert (z.B. p = 45).

Besten Dank im Voraus.

 

[Gelöscht 875920]

Das ist nicht "nichtlinear", sondern schlichtweg widersprüchlich.
Wenn 20 Punkte 17% entsprechen, können 30 Punkte nicht 23% sein.

Du solltest dir statt der Prozente eine andere Einheit ausdenken, z.B. MeinMilestone1 und MeinMilestone2

 

[BeBur]

Ich hab das nicht so ganz verstanden. Nach welcher Regel bzw. welchen Regeln wurden die Meilensteine bestimmt (also das 20 Punkte = 17% ausmachen) und vor allem: Was gilt dazwischen?
Das musst du erstmal prinzipiell beantworten, wie man das dann rechnerisch macht kommt danach erst.

 

[machhommy]

Das ist nicht "nichtlinear", sondern schlichtweg widersprüchlich.

Das habe ich doch nirgends geschrieben.

Wenn 20 Punkte 17% entsprechen, können 30 Punkte nicht 23% sein.

Nicht 30 Punkte sind bei 23 % sondern 30 Punkte machen 23 % der Leiste aus und doch können Sie, denn die Aufteilung der Meilenstein erfolgt rein optisch.

 

[tollertyp]

Besser verstehen könnte man es wohl mit verschiedene konkreten Beispielen, wie die jeweiligen Eingangswerte sind und was du dann daraus erwartest.

 

[Gelöscht 875920]

Das habe ich doch nirgends geschrieben.

Ausser im Threadtitel.

Nicht 30 Punkte sind bei 23 %

Das habe ich nirgends geschrieben.

Also noch mal: Wenn 20 Punkte 17% ausmachen, dann müssen die nächsten 20 Punkte auch 17% ausmachen. Sonst ist die Einheit "Prozent" schlichtweg die falsche Wahl.

Ergänzung (7. Juni 2022)

Besser verstehen könnte man es wohl mit verschiedene konkreten Beispielen, wie die jeweiligen Eingangswerte sind und was du dann daraus erwartest.

Er will folgendes:
20 Punkte sollen 17% Prozent auffüllen
50 Punkte sollen jedoch 40 Prozent auffüllen (das ist oben in seiner Grafik falsch dargestellt, da steht 50%)

Genau genommen will er mehrere progress bars hintereinander, die aber wie eine dargestellt werden

 

[machhommy]

Ich hab das nicht so ganz verstanden. Nach welcher Regel bzw. welchen Regeln wurden die Meilensteine bestimmt (also das 20 Punkte = 17% ausmachen) und vor allem: Was gilt dazwischen?
Das musst du erstmal prinzipiell beantworten, wie man das dann rechnerisch macht kommt danach erst.

Die Meilensteine wurde optisch mit display:flex verteilt.

Ausser im Threadtitel.

Auch das steht nichts von "nicht nichtlinear".

Also noch mal: Wenn 20 Punkte 17% ausmachen, dann müssen die nächsten 20 Punkte auch 17% ausmachen. Sonst ist die Einheit "Prozent" schlichtweg die falsche Wahl.

Nein müssen sie doch nicht wenn die Verteilung der Meilensteine rein optisch erfolgt.

 

[KitKat::new()]

Wie man sieht machen die ersten 20 Punkte nur 17 % der Leiste aus. Die nächsten 30 Punkte machen 23 % aus und die nächsten 50 Punkte machen wiederum 23 % aus.

Das geht, wenn du jedem Punkt einen Typ gibst.
Ein Punkt aus Gruppe 1 addiert pro Punkt 17/20=0,85 Prozentpunkte dazu.
Ein Punkt aus Gruppe 2 addiert pro Punkt 23/30=0,766666... Prozentpunkte dazu.
usw.

Oder eine abschnittsweise lineare Interpolation, wobei ich nicht verstehe weshalb das deiner Meinung nach nicht funktionieren soll


Wie misst sich jedoch der "Fortschritt" oder was auch immer die Progressbar repräsentiert ab 100 Punkten?

 

[tollertyp]

Vermutlich hilft wirklich nur die Bereichsbetrachtung...
Also prüfen, in welchem Bereich sich p befindet.
Dann schauen, wie weit p dann prozentual in diesem Bereich fortgeschritten ist:
Z.B. für p = 45.
Bereich ist 20-50 Punkte, was dem Prozentberich 17%-50% entspricht.
Das heißt ist im Bereich 20-50 zu 83% fortgeschritten [Formel: (45-20)/(50 - 20)=0,8333]
83% bei 17%.-50% bedeutet 17% + (50-17)*0,83% = 44,4% etwa

 

[KitKat::new()]

Also noch mal: Wenn 20 Punkte 17% ausmachen, dann müssen die nächsten 20 Punkte auch 17% ausmachen. Sonst ist die Einheit "Prozent" schlichtweg die falsche Wahl.

müssen sie nicht.

z.B. wenn man einen LKW mit verschiedengrossen kartons füllt, steigt der Füllstand nicht direkt proportional mit der Anzahl der Kartons. Große Kartons haben einen größeren Fortschritt

 

[Hancock]

Die Progressbar zwischen zwei Meilensteinen linear interpolieren.

Pseudocode:
1. [m1,m2]=find(milestones,(a,b)=>{return a<p<b;});//Diese Funktion musst du programmieren, mglw. einfach ein "highest lower" reicht dir

function lower_bound(d,val){
for(let i=0;i<d.length;i++)
if(d[i]>val)return i-1;
return d.length-1;
}

2. set_bar(m1.visual+(m2.visual-m1.visual)*(p-m1.real));

(Alle Zahlen zwischen 0 und 1)

Spaßig wird das natürlich am Anfang und Ende, da musst du mglw. dann "virtuelle" Milestones in deinen Code einfügen.

 

[Murray B.]

Ich habe es auch nicht verstanden. Was sollen denn die Prozentangaben, wenn die in keiner Weise mit den Punkten korrelieren?

 

[Gelöscht 875920]

Auch das steht nichts von "nicht nichtlinear".

Korrekt, da steht "nicht linear", weshalb ich dich darauf hingewiesen habe, dass du "widersprüchlich" meinst.

Nein müssen sie doch nicht wenn die Verteilung der Meilensteine rein optisch erfolgt.

Das hat dann halt nichts mehr mit "%" zu tun

Ergänzung (7. Juni 2022)

müssen sie nicht.

z.B. wenn man einen LKW mit verschiedengrossen kartons füllt, steigt der Füllstand nicht direkt proportional mit der Anzahl der Kartons. Große Kartons haben einen größeren Fortschritt

Wenn 20 Punkte 17% sind, sind 30 Punkte nicht 23%

Der LKW-Vergleich hat damit ebenfalls nichts zu tun.

 

[machhommy]

Es ist nicht nötig einen Fortschritt aktiv zu messen. Da diese Leiste nur einmal beim Aufruf vom Warenkorb gefüllt wird und der Warenkorbwert ist ja fest.

Ich habe es auch nicht verstanden. Was sollen denn die Prozentangaben, wenn die in keiner Weise mit den Punkten korrelieren?

Es sollt halt optisch für den Kunden einigermaßen passend aussehen. Bedeutet wenn ich einen Warenkorbwert von z.b. 75 Punkte haben dann sollte die Leiste genau zwischen 50 und 100 Punkten hängen.

Und wenn du z.B. 95 Punkte hast dann füllt sich die leiste bis kurz vor die 100 Punktemarke.

 

[tollertyp]

Naja die Punkte verhalten sich im Fortschritt halt nicht linear, die dargestellten Prozentpunkte (bezogen auf den Fortschritt, nicht auf die Punkte) sind dennoch linear.

 

[KitKat::new()]

Der LKW-Vergleich hat damit ebenfalls nichts zu tun.

Doch, und inwiefern er was damit zu tun habe, habe ich erklärt.

 

[machhommy]

Noch mal auf deutsch. Ich möchte das der Balken sich optisch entsprechend füllt um den Kunden eine visuelle Referenz zu geben wie weit er noch vom nächsten Meilenstein entfernt ist.

Beispiel:

Bedeutet wenn ich einen Warenkorbwert von z.b. 75 Punkte haben dann sollte die Leiste genau zwischen 50 und 100 Punkten hängen.

Und wenn du z.B. 95 Punkte hast dann füllt sich die Leiste bis kurz vor die 100 Punktemarke.

Wenn 20 Punkte 20 %, 50 Punkte 50 % entsprechen würden wäre das alles kein Problem mit einem einfachen Dreisatz. Das ist aber eben nicht der Fall.

 

[tollertyp]

Also wenn du nur "p" zur Hand hast, dann wird es nicht die eine Formel geben.
Aber du kannst es eben umrechnen, und wenn du ein Modell der Meilensteine zur Laufzeit hast, dann kommt der Code auch ohne größere Redundanz aus.

Wie gesagt: Ich würde
a) schauen welcher Bereich ist es
b) den Fortschritt zwischen den beiden Meilensteinen berechnen
c) den Fortschritt auf den Gesamtfortschritt umrechnen

Ein Beispiel für so eine Rechnung habe ich ja oben gegegeben. Wenn du die Meilensteine samt Prozentpunkte in einem Modell hast, kannst du den Bereich auch bequem bestimmen.

 

[Zeroflow]

Ja, in dem Fall musst du's hald umrechnen.

Die Leiste selbst hat 0-100%
0-20 Pkt mappst du auf 0..17%
20-50 Pkt mappst du auf 17..50%
50..100 Pkt mappst du auf 50..83%
100..200? Pkt mappst du auf 83..100%

Ein paar if Befehle und grundlegende Mathematik lösen das.

 

[machhommy]

Also wenn du nur "p" zur Hand hast, dann wird es nicht die eine Formel geben.

Danke dir, das war meine Hoffnung. Ich schaue mir mal dein Vorschlag in ruhe an. Du hast es auf jeden fall schnell verstanden und erfasst.