¿Cómo configuro un límite superior mínimo para un eje en Highcharts?

Question

estoy tratando de establecer un límite superior mínimo, en concreto:

• El eje Y deberían empezar a 0
• El eje Y deben ir a por lo menos 10, o superior (de forma automática escala)
• El límite superior para el eje Y nunca debe ser inferior a 10.

Parece algo que hace Highcharts, pero no puedo entender cómo. Alguien tiene experiencia con esto?

Answer 1

Highcharts no parece tener una opción para hacer esto en el momento de creación del gráfico. Sin embargo, exponen un par de métodos para interrogar a los extremos y cambiar los extremos, getExtremes() y setExtremes(Number min, Number max, [Boolean redraw], [Mixed animation]) que se encuentran en su documentation.

lo tanto, una posible solución (después de la creación de gráficos):

if (chart.yAxis[0].getExtremes().dataMax < 10) { 
    chart.yAxis[0].setExtremes(0, 10); 
} 

yAxis[0] hace referencia al primer eje y, y yo estoy asumiendo que sólo tiene un eje en este caso. El doc explica cómo acceder a otros ejes.

Esto no es ideal, porque el gráfico tiene que volver a dibujar, que no es demasiado notable, pero todavía está allí. Con suerte, Highcharts podría tener este tipo de funcionalidad incorporada a las opciones.

Answer 2

HigtCharts tiene una muy buena documentación de todos los métodos con ejemplos.

http://www.highcharts.com/ref/#yAxis--min

En su caso creo que deberías las propiedades "max" del "eje Y" "min" y.

mín .: Número El valor mínimo del eje. Si es nulo, el valor mínimo se calcula automáticamente. Si la opción startOnTick es verdadera, el valor mínimo puede redondearse hacia abajo. El valor predeterminado es nulo.

max: Número El valor máximo del eje. Si es nulo, el valor máximo se calcula automáticamente. Si la opción endOnTick es verdadera, el valor máximo puede redondearse hacia arriba. El valor máximo real también está influenciado por chart.alignTicks. El valor predeterminado es nulo.

Si va a crear el gráfico de forma dinámica debe establecer

min = 0 max = 10, si sus todos los valores de datos están a menos de 10

y

única min = 0 , si tiene un valor mayor que 10

Buena suerte.

Answer 3

establecer el valor mínimo del eje y el intervalo de las marcas de graduación en unidades del eje al igual que Probar:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    yAxis: { 
     min: 0, 
     max: 10, 
     tickInterval: 10 
    } 
}); 

También no se olvide de establecer el valor máximo.

Espero que ayude.

Answer 4

Agregando a Julian D's very good answer, lo siguiente evita un posible problema de reposicionamiento si el máximo calculado varía en número de dígitos a su límite superior deseado.

En mi caso, tenía datos de porcentaje actualmente en los 20, pero quería un rango de 0 a 100, con la posibilidad de ir a más de 100 si fuera necesario, entonces los siguientes conjuntos min & máximo en el código, luego si dataMax resulta ser más alto, reasigna máximo hasta su valor. Esto significa que el posicionamiento gráfico siempre se calcula con suficiente espacio para valores de 3 dígitos, en lugar de calcularse para 2 dígitos, luego se rompe apretando "100", pero permite hasta "999" antes de que haya un problema.

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     events: { 
      load: function(event) { 
       thisSetMax = this.yAxis[0].getExtremes().max; 
       thisDataMax = this.yAxis[0].getExtremes().dataMax; 
       if (thisDataMax > thisSetMax) { 
        this.yAxis[0].setExtremes(0, thisDataMax); 
        alert('Resizing Max from ' + thisSetMax + ' to ' + thisDataMax); 
       } 
      } 
     }   
    }, 
    title: { 
     text: 'My Graph' 
    }, 
    xAxis: { 
     categories: ['Jan 2013', 'Feb 2013', 'Mar 2013', 'Apr 2013', 'May 2013', 'Jun 2013'] 
    }, 
    yAxis: { 
     min: 0, 
     max: 100, 
     title: { 
      text: '% Due Tasks Done' 
     } 
    } 
    //Etc... 
}); 

Answer 5

Una manera de hacer esto sólo con las opciones (no hay eventos o funciones) es:

yAxis: { 
    min: 0, 
    minRange: 10, 
    maxPadding: 0 
} 

Aquí minRange define la duración mínima del eje. maxPadding está predeterminado a 0.01, lo que haría que el eje sea más largo que 10, por lo tanto, lo configuramos en cero.

Esto produce los mismos resultados que setExtreme daría. Ver this JSFiddle demonstration.