javascript - change - cómo cambiar los valores del eje Y de números reales a entero en chartjs?

position legend chartjs

Question

Tengo un gráfico que quiero incluir en mi sitio web usando Chart.js . En el eje Y me da números reales en lugar de enteros, y eso es lo que quiero, aquí hay una imagen de lo que tengo ahora:

Y ese es el código:

 var lineChartData = {
labels : ["2013/04/01","2013/03/31", "2013/03/30", "2013/03/29", "2013/03/28","2013/03/27", "2013/03/26"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : ["0", "2","1", "0", "1","0","1"]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);

Answer 1

Pruebe esto, donde max es el valor más alto de sus datos.

var steps = 3;
new Chart(ctx).Bar(plotData, {
scaleOverride: true,
scaleSteps: steps,
scaleStepWidth: Math.ceil(max / steps),
scaleStartValue: 0
});

Answer 2

Si desea comenzar en un número diferente de cero, debe tener esto en cuenta:

var step = 5;
var max = 90
var start = 40;
new Chart(income).Bar(barData, {
scaleOverride: true,
scaleSteps: Math.ceil((max-start)/step),
scaleStepWidth: step,
scaleStartValue: start
});

Answer 3

Compruebe la documentación de Chart.js , en la sección Configuración global:

// Boolean: si la escala debe pegarse a números enteros, no flota, incluso si dibuja espacio hay scaleIntegersOnly: true,

Espero eso ayude.

Answer 4

No pude obtener las respuestas existentes que funcionan para mí cuando uso la nueva versión 2 de Chart.js , así que esto es lo que encontré para resolver este problema en V2:

new Chart(ctx, {type: ''bar'', data: barChartData,
options:{
scales: {
yAxes: [{
ticks: {
stepSize: 1
}
}]
}
}
});

Answer 5

Lo manejé de esta manera en una nueva versión:

new Chart(ctx, {
type: ''bar'',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value) {if (value % 1 === 0) {return value;}}
}
}]
}
}
});