1

Guiándome de la documentación la data es un ejemplo como el de ellos, sin embargo no me muestra la data.

var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }, {
        x: 25,
        y: 20
    }, {
        x: 35,
        y: 25
    }],
    options: {
        scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true
                }]
        },
        elements: {
            line: {
                tension: 0, // disables bezier curves
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="myChart" style="height: 180px; width: 633px;" height="180" width="633"></canvas>

2 respuestas 2

1

La data no es como la vi en la documentacion, no se si es confusión mía o de ellos, en fin, la data es como este ejemplo que expongo.

var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
	    {
	      label: '# of Votes',
	      data: [12, 19, 3, 5, 2, 3],
      	borderWidth: 1,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132,1)'
    	}
		]
  },
    options: {
        scales: {
                xAxes: [{
                  ticks: {
                    fontSize: 10,
                    maxRotation: 0 // angle in degrees
                  }
                }],
                yAxes: [{
                  ticks: {
                    fontSize: 10,
                    maxRotation: 0 // angle in degrees
                  }
                }]
        },
        elements: {
            line: {
                tension: 0, // disables bezier curves
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="myChart" style="height: 180px; width: 633px;" height="180" width="633"></canvas>

-1

Lo que sucede es que

data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }, {
        x: 25,
        y: 20
    }, {
        x: 35,
        y: 25
    }],

Es como se definen intervalos o puntos, Point[] y deben ser definidos en cada datasets

data:{
 datasets:{
  data: //here 
 }
}

Tambien el tipo de grafica debe ser type: 'scatter' Aqui te dejo un ejemplo sacado de la documentacion

var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset Ejemplo',
            data: [{
                x: -10,
                y: 0,
            }, {
                x: 0,
                y: 10
            }, {
                x: 10,
                y: 5
            }]
        }]
    },
    options: {
       scales: {
            yAxes: [{
                stacked: true
            }]
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="myChart" style="height: 180px; width: 633px;" height="180" width="633"></canvas>

1
  • ¿Cual es mejor entre las 2? o ¿En cuales casos se deberían usar los distintos modos que hay? Solo pregunto para dejar en claro la respuesta :D
    – bypabloc_
    Commented el 24 jul. 2017 a las 0:45

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.