Highcharts - Zachowaj zero wyśrodkowane na osi Y z wartościami ujemnymi

Question

Mam wykres warstwowy z wartościami ujemnymi. Nic dziwnie nie różni się od the example they give, ale jest jeden zwrot: chciałbym zachować zero wyśrodkowane na osi Y.

wiem, że można to osiągnąć przez ustawienie yAxis.max pewną wartością n i yAxis.min do -n z n przedstawia wartość bezwzględną albo piku na wykresie lub koryta, jeżeli jest ona większa (jak w this fiddle). Jednak moje dane są dynamiczne, więc nie wiem z góry, co musi być.

Jestem względnie nowy w Highcharts, więc możliwe jest, że brakuje mi sposobu, aby to zrobić poprzez konfigurację i niech Highcharts zajmie się tym dla mnie, ale wygląda na to, że muszę ręcznie zaadresować JavaScript oś y samodzielnie, gdy strona ładuje się, a wraz z pojawieniem się nowych danych.

Czy istnieje łatwy, konfigurowany sposób utrzymywania punktu zerowego na środku osi Y?

Answer 1

Skończyło się na znalezieniu sposobu, aby to zrobić poprzez konfigurację po kopaniu jeszcze dalej w interfejsie API Highcharts. Każda oś ma opcję konfiguracji o nazwie tickPositioner, dla której podajesz funkcję, która zwraca tablicę. Ta tablica zawiera dokładne wartości, w których mają pojawiać się znaczniki na osi. Oto moja nowa konfiguracja tickPositioner, co stawia pięć kleszczy na moje osi Y, z zera starannie w środku i max przy obu skrajności:

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

Można to zrobić z getExtremes i setExtremes metod

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

przykład:

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

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

Answer 3

Wiem, że to stary post, ale myślałem, że po mojej rozwiązanie w każdym razie (który jest inspirowany z jednej macserv zasugerowano powyżej w przyjętym odpowiedzi), ponieważ może to pomóc innym, którzy szukają podobnego rozwiązania:

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

Tylko w przypadku, gdy ktoś jest wyszukiwanie,

jedną opcję jeszcze. Skończyłem w podobnej sytuacji. Wynika moje rozwiązanie:

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

Oto moje rozwiązanie. Dobrą rzeczą jest to, że możesz zachować tickInterval.

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; 
    }