Highcharts - Nullpunkt auf Y-Achse mit negativen Werten zentriert

Question

Ich habe ein Flächendiagramm mit negativen Werten. Nichts wahnsinnig anders als the example they give, aber es gibt eine Wendung: Ich möchte Null auf der Y-Achse zentriert halten.

Ich weiß, diese n durch Einstellen der yAxis.max auf einen Wert erreicht werden kann, undyAxis.min zu -n mit n entweder der Spitze des Diagramms den Absolutwert darstellt, oder der Mulde, je nachdem, was größer ist, (wie in this fiddle). Allerdings sind meine Daten dynamisch, so dass ich nicht vorher weiß, was n sein muss.

Ich bin relativ neu zu Highcharts, so ist es möglich, dass ich einen Weg vermisse, dies durch Konfiguration zu tun, und Highcharts sich darum kümmern, aber es sieht so aus, als müsste ich Javascript manuell einstellen die Y-Achse selbst, wenn die Seite geladen wird und neue Daten eintreffen.

Gibt es eine einfache, konfigurationsgesteuerte Methode, um die Null auf der Y-Achse zentriert zu halten?

Answer 1

Ich habe einen Weg gefunden, dies durch Konfiguration zu tun, nachdem ich noch mehr in die Highcharts API gegraben habe. Jede Achse hat eine Konfigurationsoption namens tickPositioner, für die Sie eine Funktion bereitstellen, die ein Array zurückgibt. Dieses Array enthält die genauen Werte, an denen Ticks auf der Achse angezeigt werden sollen. Hier ist meine neue tickPositioner Konfiguration, die fünf Ticks auf meiner Y-Achse platziert, mit null ordentlich in der Mitte und der max an beiden Extremen:

yAxis: { 

    tickPositioner: function() { 

     var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin))); 
     var halfMaxDeviation = Math.ceil(maxDeviation/2); 

     return [-maxDeviation, -halfMaxDeviation, 0, halfMaxDeviation, maxDeviation]; 
    }, 

    ... 
} 

Answer 2

Sie diese Methoden mit den getExtremes und setExtremes tun können

• http://api.highcharts.com/highcharts#Axis.getExtremes%28%29
• http://api.highcharts.com/highcharts#Axis.setExtremes%28%29

Beispiel:

http://jsfiddle.net/jlbriggs/j3NTM/1/

var ext = chart.yAxis[0].getExtremes(); 

Answer 3

Ich weiß, dass dies eine alte Post, aber dachte, ich würde schreiben mein ohnehin Lösung (die sich von der macserv inspiriert wird vorgeschlagen, oben in der akzeptierte Antwort), wie es andere, die auf der Suche nach einer ähnlichen Lösung helfen können:

tickPositioner: function (min, max) { 
      var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin))); 
      return this.getLinearTickPositions(this.tickInterval, -maxDeviation, maxDeviation); 
     } 

Answer 4

Nur falls jemand sucht,

eine Option Mehr. Ich bin in einer ähnlichen Situation gelandet. Folgt meine Lösung:

tickPositioner: function() { 
    var dataMin, 
    dataMax = this.dataMax; 
    var positivePositions = [], negativePositions = []; 

    if(this.dataMin<0) dataMin = this.dataMin*-1; 
    if(this.dataMax<0) dataMax = this.dataMax*-1; 

    for (var i = 0; i <= (dataMin)+10; i+=10) { 
     negativePositions.push(i*-1) 
    } 

    negativePositions.reverse().pop(); 

    for (var i = 0; i <= (dataMax)+10; i+=10) { 
     positivePositions.push(i) 
    } 

    return negativePositions.concat(positivePositions); 

}, 

http://jsfiddle.net/j3NTM/21/

Answer 5

Hier ist meine Lösung. Das Schöne daran ist, dass Sie die pflegen können.

tickPositioner(min, max) { 
    let { tickPositions, tickInterval } = this; 
    tickPositions = _.map(tickPositions, (tickPos) => Math.abs(tickPos)); 
    tickPositions = tickPositions.sort((a, b) => (b - a)); 

    const maxTickPosition = _.first(tickPositions); 
    let minTickPosition = maxTickPosition * -1; 

    let newTickPositions = []; 
    while (minTickPosition <= maxTickPosition) { 
     newTickPositions.push(minTickPosition); 
     minTickPosition += tickInterval; 
    } 

    return newTickPositions; 
    }