it-swarm.com.de

Highcharts: Stellen Sie sicher, dass der Wert der y-Achse unten im Diagramm liegt

Ich gebe eine Reihe von Highcharts auf einer Seite aus. In einigen Fällen können alle Daten für den angegebenen Zeitraum mit 0-Werten zurückgegeben werden.

In diesem Fall sieht das Diagramm folgendermaßen aus: http://jsfiddle.net/charliegriefer/KM2Jx/1/

Es gibt nur 1 y-Achsenbeschriftung, 0 und befindet sich in der Mitte des Diagramms.

Ich möchte den Wert 0 für die y-Achse zwingen, sich am unteren Rand des Diagramms zu befinden, was mit anderen Diagrammen auf der Seite, die Daten enthalten, konsistent wäre.

Habe verschiedene yAxis-Eigenschaften ausprobiert, beispielsweise "min: 0", "minPadding: 0", "maxPadding: 0", "startOnTick: true".

Es sollte ziemlich unkompliziert sein, aber ich bin ratlos :(

Relevanter yAxis-Code:

yAxis: {
    min: 0, 
    minPadding: 0, 
    startOnTick: true, 
    title: {
        text: ""
    }
},
30
charliegriefer

Nur so konnte ich es "richtig" zeigen, indem ich auch einen yAxis max-Wert liefere. Ich denke, dies ist ein HighCharts-Problem, wenn Sie keine Datenelemente mit einem Y-Wert angeben. Es zeichnet die beste Grafik, die es für möglich hält.

12
wergeld

Ich habe eine andere (und sehr einfache) Lösung gefunden:

Sie können die minRange-Eigenschaft der y-Achse einstellen:

yAxis: {
    ...
    minRange : 0.1
}

Dadurch werden in Highcharts die Werte für min und max angezeigt, wenn alle Daten den Wert 0 haben.

AKTUALISIEREN:

Highcharts 4.1.9 fix benötigt auch:

        plotOptions: {
            line: {
                softThreshold: false
            }
        }

aktualisierte Js-Geige

40
BobTheBuilder

Ich hatte dies auch im HighCharts-Forum veröffentlicht, wo ich eine Antwort bekam, die scheinbar funktioniert. Leider muss ich die Daten vor dem Rendern der Diagramme vorverarbeiten, um nach allen "0" -Datenwerten zu suchen ... aber es wird funktionieren. Ich wünschte nur, es wäre etwas mehr "eingebaut" in HighCharts.

Wenn Sie also die "y" -Werte summieren, sollten die Eigenschaften der y-Achse folgendermaßen aussehen:

yAxis: {
    minPadding: 0, 
    maxPadding: 0,         
    min: 0, 
    max:1,
    showLastLabel:false,
    tickInterval:1,
    title: {
            text: ""
    }
}

Siehe: http://jsfiddle.net/KM2Jx/2/

Die Schlüssel scheinen die Eigenschaften "max" und "showLastLabel" zu sein.

4
charliegriefer

Hier ist ein Fix, das ich mir ausgedacht habe, ohne dass eine Vorverarbeitung der Daten erforderlich ist, und lassen Sie einfach Highcharts das tun, wie es vor dem Update der Fall war. http://jsfiddle.net/QEK3x/

if(chart.yAxis[0].dataMax === 0)
{
   chart.yAxis[0].setExtremes(0, 5);
}

Sie müssen nur die erste Serienachse überprüfen, da die erste Achse nicht 0 ist, dann tritt das Problem nicht auf. Ich kann eine Pull-Anfrage dazu bei High-Charts einreichen, obwohl ich irgendwie das Gefühl habe, sie wären aus irgendeinem Grund für diese Funktionalität gedacht. 

3
Ciarán

Seit Highcharts 5.0.1 können Sie auch softMax verwenden.

softMax: Anzahl
Ein weiches Maximum für die Achse. Wenn das Seriendatenmaximum größer ist als dies, bleibt die Achse auf diesem Maximum. Wenn jedoch das Seriendatenmaximum höher ist, zeigt die Achse eine Biegung, um alle Daten anzuzeigen.

yAxis: {
    min: 0,
    softMax: 100,
    ...
}

Hier ein Beispiel mit einem Säulendiagramm: http://jsfiddle.net/84LLsepj/

Beachten Sie, dass es derzeit in Highcharts 5.0.7 nicht für alle Diagrammtypen zu funktionieren scheint. Wie Sie in diesem anderen jsfiddle sehen können, funktioniert es nicht mit Liniendiagramm.

2
Yorick Hermieu

minRange: 1 oder was auch immer Sie in Bruchteilen von angezeigt bekommen
softMax: 100 oder wie auch immer Sie sich fühlen

 Result

yAxis: {
         minRange : 1,
         softMax: 100
       }
0
Praveen

Für Highcharts 5.x.x sollten Sie einfach Folgendes angeben können:

yAxis: {
  softMin: 0,
  softMax: 1,
};

Dies funktioniert nicht für ein Liniendiagramm, daher müssen Sie auch minRange im selben Konfigurationsobjekt wie oben setzen. Experimentieren Sie mit verschiedenen Werten, da Sie zum Beispiel minRange: 6 einen Bereich auf yAxis zwischen 0 und 4 erstellt haben.

0
Maciej Gurban

Fügen Sie einfach die Option "min" hinzu

yAxis: {
   min: 0
}
0