Na ja, bei mir gefällt mir das Ergebnis jedenfalls sehr. Und in Kombination mit der anderen Anpassung an den Rundungen wird es Spitze sein!
Ich bereite das für dich vor…
@pierre-gilles, ich denke, du solltest das Ende deines Codes durch Folgendes ersetzen:
// Optional: Schrittgröße begrenzen
const nbTheoreticalStep = (maxY - minY) / f;
let stepSize = f; // Standard-Schrittgröße
// Anzahl der Schritte für bessere Visualisierung anpassen
if (nbTheoreticalStep > 5) {
stepSize = f * 2; // wenn zu viele Schritte, Schrittgröße erhöhen
} else if (nbTheoreticalStep < 3) {
stepSize = f / 2; // wenn zu wenige Schritte, Schrittgröße verringern
}
return { minY, maxY, stepSize };
@StephaneB Es ist aktualisiert!
Immer noch unter derselben URL:
https://fix-chart-min-max.gladys-plus.pages.dev
Ich freue mich auf neues Feedback 
Das ist bei fast allen meinen Graphen der Fall. Bis auf zwei eigentlich.
Bei diesem hier ist der Graph oben abgeschnitten. Aber ich weiß, woher das kommt, es ist ein Fall, bei dem die theoretische Schrittzahl 7 beträgt und die Anpassung sie auf 3,5 reduziert, und das verursacht ein Problem… Ich schaue mir das an, um dir einen Code-Fix vorzuschlagen
Bei diesem hier verstehe ich allerdings nicht, wie die Berechnung zu einer Skala von -4;0;4;8;12 führt. Das ist sauber, aber mit dem Code hätte ich -10;0;10;20 erwartet. Ich werde versuchen, das zu verstehen, und melde mich dann wieder…
@pierre-gilles Für das erste Diagramm sollte der folgende Code besser sein. Im Grunde, wenn die Amplitude der Abszissen nicht ein exaktes Vielfaches der Schrittweite ist, wird die Amplitude der Abszissen nach oben oder unten verschoben.
// Optional: Schrittgröße einschränken
const nbTheoreticalStep = (maxY - minY) / f;
let stepSize = f; // Standard-Schrittgröße
// Anzahl der Schritte für bessere Visualisierung anpassen
if (nbTheoreticalStep > 5) {
stepSize = f * 2; // wenn zu viele Schritte, Schrittgröße erhöhen
if !(isInteger((maxY - minY) / stepSize) {
// Wenn der Bereich kein Vielfaches der Schrittgröße ist, muss minY oder maxY angepasst werden.
// Anpassung wird für eine gute Zentrierung des Diagramms gewählt
if ((maxY - maxVal) < (minVal - minY)) {
maxY = maxY + stepSize / 2;
} else {
minY = minY - stepSize / 2;
}
}
} else if (nbTheoreticalStep < 3) {
stepSize = f / 2; // wenn zu wenige Schritte, Schrittgröße verringern
}
return { minY, maxY, stepSize };
@pierre-gilles, ich habe gerade die Optionen von ApexCharts durchgesehen. Wäre das, was wir hier codieren, nicht eigentlich mit der Option ‹ forceNiceScale › direkt behandelt worden?
Ein weiteres Detail: Wenn die Werte des Diagramms negativ und positiv sind (ich nehme als Beispiel von -28 bis +26), werden die Werte auf der Achse wie folgt sein: -30, -10, 10, 30. Und ich finde es schade, dass man die Null nicht sieht.
Mein Lieblings-KI-Tool sagt, dass man das mit Annotationen machen kann (um eine leichte gestrichelte Linie bei y=0 zu haben):
var options = {
// ... andere Diagrammoptionen ...
annotations: {
yaxis: [{
y: 0,
borderColor: '#00E396',
strokeDashArray: 5, // Erstellt eine gestrichelte Linie
borderWidth: 1, // Linienstärke
opacity: 0.7, // Linienopazität (optional)
label: {
show: false // Beschriftung ausblenden
}
}]
}
};
Was denkst du?
Die Sache wäre, sie nur hinzuzufügen, wenn minY negativ und maxY positiv ist, denn es hat keinen Sinn, wenn alles ‹ weit weg › von der Null ist…
Ich habe gerade forceNiceScale getestet, ich sehe keinen Unterschied zur Option, die aktuell in Produktion ist!
Dein Code ist nicht gültig, nur zur Info, hier ist der Code, der aktuell im PR ist:
calculateYAxisRange = () => {
const { series } = this.props;
// Extract all values from all series
const allValues = series.flatMap(serie => serie.data.map(([, value]) => value));
const minVal = Math.min(...allValues);
const maxVal = Math.max(...allValues);
const range = maxVal - minVal;
const f = Math.pow(10, Math.floor(Math.log10(Math.abs(range)))); // Scaling factor
const minY = Math.floor(minVal / f) * f;
const maxY = Math.ceil(maxVal / f) * f;
// Optional: Constrain the step size
const nbTheoreticalStep = (maxY - minY) / f;
let step = f; // Default step size
// Adjust number of steps for better visuals
if (nbTheoreticalStep > 5) {
step = f * 2; // if too much steps, increase step size
} else if (nbTheoreticalStep < 3) {
step = f / 2; // if too few steps, reduce step size
}
return { minY, maxY, step };
};
Ich würde mich freuen, wenn du diesen Codeabschnitt änderst und ihn mir dann schickst
PS: Schade, dass du nicht direkt testen kannst ^^ Ich weiß nicht, ob du ein Github-Konto hast, aber du kannst eine Gladys-Umgebung mit einem Klick von Github aus starten, das würde Hin- und Hergehen vermeiden
Diesmal sollte es funktionieren. Ich habe es in Codepen getestet und meine 3 Fehler gefunden 
calculateYAxisRange = () => {
const { series } = this.props;
// Alle Werte aus allen Serien extrahieren
const allValues = series.flatMap(serie => serie.data.map(([, value]) => value));
const minVal = Math.min(...allValues);
const maxVal = Math.max(...allValues);
const range = maxVal - minVal;
const f = Math.pow(10, Math.floor(Math.log10(Math.abs(range)))); // Skalierungsfaktor
let minY = Math.floor(minVal / f) * f;
let maxY = Math.ceil(maxVal / f) * f;
// Optional: Schrittgröße einschränken
const nbTheoreticalStep = (maxY - minY) / f;
let step = f; // Standard-Schrittgröße
// Anzahl der Schritte für bessere Visualisierung anpassen
if (nbTheoreticalStep > 5) {
step = f * 2; // wenn zu viele Schritte, Schrittgröße erhöhen
if (! Number.isInteger((maxY - minY) / step)) {
// Wenn der Bereich kein Vielfaches der Schrittgröße ist, müssen minY oder maxY angepasst werden.
// Die Anpassung wird für eine gute Zentrierung des Graphen gewählt
if ((maxY - maxVal) < (minVal - minY)) {
maxY = maxY + step / 2;
} else {
minY = minY - step / 2;
}
}
} else if (nbTheoreticalStep < 3) {
step = f / 2; // wenn zu wenige Schritte, Schrittgröße verringern
}
return { minY, maxY, step };
};
Ich habe ein Github-Konto, das ich erstellt habe, als du mich gebeten hast, dort eine Issue zu erstellen aber ich habe seitdem nichts weiter damit gemacht.
Wenn du sagst, dass man eine Gladys-Umgebung mit einem Klick starten kann, bedeutet das, dass man eine Entwicklungsumgebung auf meinem Windows-PC einrichtet, oder handelt es sich um eine vollständige Online-Sandbox?
Eigentlich gehört der PC meiner Firma, also installiere ich nicht einfach alles, was ich möchte
Kleine Sachen online basteln (wie hier zum Beispiel diesen Code-Schnipsel, den ich auf codepen.io teste, das kann ich…)
Danke! Ich habe gerade den PR geändert, hier ist das Ergebnis mit den Daten, die du mir gegeben hast:
Immer noch verfügbar unter derselben URL: https://fix-chart-min-max.gladys-plus.pages.dev
dann handelt es sich um eine Entwicklungsumgebung, die vollständig im Browser läuft, ähnlich wie Codepen. Das nennt sich « Github CodeSpace », es gibt einen kostenlosen Plan mit 120 Core-Stunden pro Monat
Das Gladys-Repo ist gut konfiguriert, um dieses Tool zu unterstützen, es startet mit einem Klick hier:
Danach landest du in einem VSCode in deinem Browser, und es ist eine fertige Umgebung, mit der du dasselbe tun kannst wie lokal (alle Abhängigkeiten sind bereits vorhanden)
Dann wird alles in der Gladys-Dokumentation erklärt:
Ich empfehle auf YouTube auch die Live-Codings, die ich gemacht habe, in denen ich alles, was ich tue, in einem Video erkläre
ok, das klingt gut. Ich werde es ausprobieren!
Getestet mit deiner URL (sehr praktisch, übrigens!), und alle diese Diagramme mit lesbaren Skalen sehen wirklich gut aus!! Soweit ich das beurteilen kann, ist es bereit zur Integration
Das ist gut für mich (Strom, Temperatur, Luftqualität) in mehreren Zeitintervallen 
Tatsächlich, früher wurde das von ApexChart verwaltet, aber jetzt müssen wir dieses Verhalten neu codieren, da wir das Minimum/Maximum manuell verwalten. Es gibt ein Ereignis legendClick, mit dem man das machen kann.
Ich würde gerne alles neu machen, aber ich beginne mich zu fragen: Ist das, was wir tun, wirklich sinnvoll? 
Ich habe das Gefühl, dass wir extern alles neu codieren, was ApexChart macht, und bisher gebe ich zu, dass ich einfach nur das kopiere, was @StephaneB mir gibt, ohne Fragen zu stellen, aber bisher sehe ich kaum einen Unterschied zu dem, was in der Produktion ist ^^
@StephaneB, erscheint dir das, was du vorschlägst, wirklich besser?
Ich habe immer noch nicht verstanden, was das eigentliche Problem ist.
Einige Beispiele für Diagramme, die, finde ich, wirklich besser lesbar sind, weil die y-Achse nun „logisch“ ist:
Ich entferne sehr selten Kurven. Wenn ich einen Fall wie den von @GBoulvin habe, bei dem Geräte in völlig unterschiedlichen Werteskalen liegen, bevorzuge ich zwei Diagramme, damit sie immer lesbar sind.
Aber ich verstehe natürlich die Sorge…
Wenn links die Produktion steht, vergleichst du zwei Dinge, und es ist schwierig, sie zu vergleichen. Ich habe Änderungen an der y-Achse in einem anderen PR vorgenommen, die noch nicht in der Produktion sind, aber bereits im Master aktiv sind, also in diesem PR ^^
Wenn wir uns eher auf den Kopf der Kurve beziehen, sehe ich fast keine Unterschiede…