Grafici elevati - Mantieni zero centrato sull'asse Y con valori negativi

Question

Ho un grafico ad area con valori negativi. Niente di pazzamente diverso da the example they give, ma c'è una svolta: mi piacerebbe mantenere lo zero centrato sull'asse Y.

So che questo può essere ottenuto impostando il yAxis.max ad un valore n e yAxis.min a -n, con n rappresenta il valore assoluto di una picco del grafico o il trogolo, se superiore (come in this fiddle). Tuttavia, i miei dati sono dinamici, quindi non so in anticipo che cosa deve essere n.

Sono relativamente nuovo per Highcharts, quindi è possibile che mi manca un modo per fare questo attraverso la configurazione e lasciare Highcharts prendersi cura di esso per me, ma che sta cercando come avrò bisogno di utilizzare Javascript per regolare manualmente l'asse y me stesso quando viene caricata la pagina e quando arrivano nuovi dati.

Esiste un modo semplice e orientato alla configurazione per mantenere lo zero centrato sull'asse Y?

Answer 1

Alla fine ho trovato un modo per farlo attraverso la configurazione dopo aver scavato ulteriormente nell'API Highcharts. Ogni asse ha un'opzione di configurazione denominata tickPositioner per la quale si fornisce una funzione che restituisce un array. Questo array contiene i valori esatti in cui si desidera visualizzare le zecche sull'asse. Ecco la mia nuova configurazione tickPositioner, che pone cinque zecche sul mio asse Y, con lo zero ordinatamente in mezzo e il massimo a entrambi gli estremi:

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

Si può fare questo con i getExtremes e setExtremes metodi

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

esempio:

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

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

Answer 3

So che questo è un vecchio post, ma pensato che avrei pubblicare il mio soluzione comunque (che si ispira da quella macserv suggerito sopra nella risposta accettata) in quanto può aiutare gli altri che sono alla ricerca di una soluzione simile:

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

Solo nel caso qualcuno è alla ricerca,

una possibilità Di Più. Sono finito in una situazione simile. Segue la mia soluzione:

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

Ecco la mia soluzione. La cosa bella di questo è che puoi mantenere lo 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; 
    }