Highcharts: problema con valores negativos al mostrar varios ejes

Question

Estamos intentando mostrar dos series de datos en el mismo gráfico. La primera serie (es decir, el número de citas) solo puede contener números enteros positivos (y 0). La segunda serie (es decir, el valor de venta) puede contener valores flotantes tanto positivos como negativos (en caso de que se lo pregunte, los valores negativos resultan de la emisión de notas de crédito).

Como se indica en la imagen adjunta, el problema que tenemos es que cuando la segunda serie contiene valores negativos, la "línea base" de 0 puntos de las dos series de datos ya no se comparte.

Hemos tratado de ajustar las opciones "min" del eje Y a 0, pero luego pierden la visión sobre los valores negativos.

También hemos intentado configurar el min de la primera serie para que sea igual al extremo mínimo de la segunda serie, pero desafortunadamente esto no escala las columnas muy bien (ya que los valores de cada eje Y están completamente diferentes escalas, es decir: 10s vs 1000s).

¿Cómo podemos configurar el gráfico para que se comparta la "línea de base" de 0 puntos? En otras palabras, ¿cómo haríamos que las columnas azules comenzaran en la misma línea base que el punto verde 0?

actualización

respuesta de Linger es un paso en la dirección correcta. Establecer el min y el tickinterval para ambos ejes es suficiente. Sin embargo, los valores deben determinarse dinámicamente en función de los datos variables, que es donde ahora estoy estancado.

¿Alguna sugerencia sobre cómo se pueden determinar estos valores min y tickinterval antes de generar el gráfico?

Mientras tanto, he pensado un poco. Los valores asociados con el eje izquierdo (azul/citas) son siempre positivos y comienzan desde cero. Por lo tanto, es el eje derecho (verde/ventas) el que dicta la cantidad de marcas que se mostrarán debajo del punto cero. Ahora ya Highcharts determina automáticamente la mejor escala para ambos azul y verde, todo lo que tiene que hacer es encontrar una manera de establecer el valor mínimo del eje de izquierda como tal (con perdón del pseudo-código):

var factor = right_axis.min/right_axis.tickinterval; 

left_axis.min = factor * left.tickinterval; 

Nota: He visto que la API de referencia tiene un método setExtremes() en Axis, pero esto requeriría que inicialice primero el gráfico, y luego regrese y actualice su eje izquierdo. Espero hacer esto antes de dibujar la tabla. Tal vez estoy pasando por alto algo obvio?

Gracias.

Answer 1

Puede controlar lo que está solicitando con una combinación de tickInterval y min en el eje ya que se demuestra en esta maqueta jsfiddle.

EDITAR

En su código mientras se lee en el XML que tendrá que realizar un seguimiento de lo que es el valor más bajo y el valor más alto en el lado de las ventas. Luego, decida cómo desea mostrar esos valores si cumplen con un determinado valor. Después de eso, usa las sentencias if para establecer los valores. Aquí hay un par de ejemplos.

Low less than -50 and greater -90 
With High less than 400 
Primary Axis: min: -2, tickInterval: 1, 
Secondary Axis: min: -100, tickInterval: 50 

Example

Low less than -50 and greater -90 
With High greater than 400 
Primary Axis: min: -1, tickInterval: 1, 
Secondary Axis: min: min: -100, tickInterval: 100, 

Example

Para averiguar cuál es el mínimo en el eje principal debe ser, simplemente divida la min en el eje secundario por su tickInterval. Entonces el tickInterval para el eje primario siempre sería 1.