0

estoy intentando alinear los ejes Y respecto al valor 0 , ejemplo: http://jsfiddle.net/7kYJu/2587/

temporalmente lo he solucionado poniendo un padding, pero es extremadamente chapuzas y al re-dimensionar el gráfico o al cambiar la data se descoloca (a no ser que se re-calcule el padding de forma dinámica pero nidea de como calcularlo, yo lo he puesto a ojo)

NO me vale la solución de poner el mismo rango en los 2 ejes, ya que la gracia de tener 2 ejes es poner diferentes rangos..

Documentacion oficial: http://c3js.org/reference.html

en esa misma pagina hay ejemplos y el source(menú superior).

Gracias

1

1 respuesta 1

1

En esta respuesta a una pregunta en inglés para un sólo eje, se indica usar un fragmento que he adaptado de la siguiente forma:

// Seleccionar el eje X
    d3.select(chart.element).select('.' + c3.chart.internal.fn.CLASS.axisX).transition()
    // y traducir a la posición de Y = 0
        .attr('transform', "translate(" + 0 + "," + chart.internal.y(0) + ")")

En cuando al segundo eje, lo que hay que hacer es agregar como mínimo un valor proporcionalmente equivalente al mínimo del primero. A continuación un ejemplo:

// Calcular el mínimo de la parte negativa del segundo eje Y
var k = (-30 / 400 ) * 50;
var chart = c3.generate({
    data: {
        columns: [
           	['data1', -30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
            data1: 'y',
            data2: 'y2'
        }
    },
     axis: {
        y: {
        },
        y2: {
            show: true,
            min: k,
        }
    }
});

// Seleccionar el eje X
d3.select(chart.element).select('.' + c3.chart.internal.fn.CLASS.axisX).transition()
// y traducir a la positición de Y = 0
    .attr('transform', "translate(" + 0 + "," + chart.internal.y(0) + ")")
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<div id="chart"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.