2

es posible empezar el gráfico desde un valor negativo hasta otro positivo?

ACTUAL

actual

ESPERADO:

introducir la descripción de la imagen aquí

Es decir, el valor comienza desde un número negativo y se extiende hasta el positivo definido en el dataset.

var canvas = document.getElementById('myChart');
var data = {
    labels: ["January"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [100],
        }
    ]
};
var option = {
	scales: {
  	yAxes:[{
    		stacked:true,
        gridLines: {
        	display:true,
          color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
    		gridLines: {
        	display:false
        }
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
	data:data,
  options:option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

Jsfiddle https://jsfiddle.net/LilNawe/Luaf2tm4/636/

2
  • A ver si entiendo, quieres que de negativo salte a positivo. Osea de -20 a 80 por ejemplo?
    – Einer
    el 18 sep. 2017 a las 19:16
  • @Einer Exacto! es exactamente lo que necesito
    – nawelittle
    el 18 sep. 2017 a las 19:22

2 respuestas 2

1

Pude lograrlo utilizando 2 datasets. El primero para los valores positivos y el segundo para los valores negativos.

var canvas = document.getElementById('myChart');
var data = {
    labels: ["January", "Febrary", "March"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [80,50,10],
        },
        {
            label: "My second dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [-20,0,0],
        }
    ]
};
var option = {
	scales: {
  	yAxes:[{
    		stacked:true,
        gridLines: {
        	display:true,
          color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
    		gridLines: {
        	display:false
        }
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
	data:data,
  options:option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

Lo que no pude lograr fue ponerlos uno debajo del otro para asi ahorrar el espacio en blanco cuando los valores negativos son igual a 0.

3
  • No es lo esperado, de igual manera gracias!
    – nawelittle
    el 18 sep. 2017 a las 19:28
  • Y que era lo que esperabas?
    – Einer
    el 18 sep. 2017 a las 19:30
  • Tal cuál está en la imagen que puse de referencia. En una misma barra ir desde -10 hasta 40 o algún número positivo.
    – nawelittle
    el 18 sep. 2017 a las 19:35
1

Había corregido la respuesta anterior pero vi que era del 2017 así que simplemente copie la respuesta y le agregue un cambio al xAxis haciendolo stacked: true de modo que tendremos nuestros valores originales y una segunda serie de datos con el negativo que deseemos, en este caso:

data: [-20, -20, -20]

este valor es a modo de ejemplo

var canvas = document.getElementById('myChart');
var data = {
    labels: ["January", "Febrary", "March"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [80,50,10],
        },
        {
            label: "My second dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [-20, -20, -20],
        }
    ]
};
var option = {
	scales: {
  	yAxes:[{
    		stacked:true,
        gridLines: {
        	display:true,
          color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
            stacked: true,
    		gridLines: {
        	display:false
        }
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
	data:data,
  options:option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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