Estoy usando un gráfico de líneas de http://www.chartjs.org/
Como puede ver, el valor máximo (130) y el valor mínimo (60) para el eje Y se eligen automáticamente, quiero un valor máximo = 500 y un valor mínimo = 0. es posible?
Estoy usando un gráfico de líneas de http://www.chartjs.org/
Como puede ver, el valor máximo (130) y el valor mínimo (60) para el eje Y se eligen automáticamente, quiero un valor máximo = 500 y un valor mínimo = 0. es posible?
Respuestas:
Tienes que anular la escala, prueba esto:
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 50,
scaleStartValue : 0
});
}
Para chart.js V2 (beta), use:
var options = {
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, // minimum will be 0, unless there is a lower value.
// OR //
beginAtZero: true // minimum value will be 0.
}
}]
}
};
Consulte la documentación de chart.js sobre la configuración de ejes lineales para obtener más detalles.
min
, max
y stepsize
los atributos del ticks
espacio de nombres
suggestedMax
por el valor máximo mínimo
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [10, 80, 56, 60, 6, 45, 15],
fill: false,
backgroundColor: "#eebcde ",
borderColor: "#eebcde",
borderCapStyle: 'butt',
borderDash: [5, 5],
}]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Legend'
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<canvas id="canvas"></canvas>
</body>
ChartJS v2.4.0
Como se muestra en los ejemplos en https://github.com/jtblin/angular-chart.js el 7 de febrero de 2017 (ya que esto parece estar sujeto a cambios frecuentes):
var options = {
yAxes: [{
ticks: {
min: 0,
max: 100,
stepSize: 20
}
}]
}
Esto dará como resultado 5 valores del eje y como tales:
100
80
60
40
20
0
xAxes
y yAxes
se suponía que eran anidado bajo scales
en las opciones. Además, esto es más nuevo que la respuesta de Ofer Sergev, que parece ser correcta, también es sorprendente.
Escribiendo esto en 2016, mientras que Chart js 2.3.0 es el último. Así es como se puede cambiar
var options = {
scales: {
yAxes: [{
display: true,
stacked: true,
ticks: {
min: 0, // minimum value
max: 10 // maximum value
}
}]
}
};
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx ,{
type: 'line',
data: yourData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: 0,
max: 500
}
}]
}
}
});
Lo configuro con 'opciones' en v2.
Debe leer la documentación: http://www.chartjs.org/docs/#scales-linear-scale
Escribí un js para mostrar valores de 0 a 100 en el eje y con un espacio de 20.
Este es mi script.js
//x-axis
var vehicles = ["Trucks", "Cars", "Bikes", "Jeeps"];
//The percentage of vehicles of each type
var percentage = [41, 76, 29, 50];
var ctx = document.getElementById("barChart");
var lineChart = new Chart(ctx, {
type: 'bar',
data: {
labels: vehicles,
datasets: [{
data: percentage,
label: "Percentage of vehicles",
backgroundColor: "#3e95cd",
fill: false
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 20,
}
}]
}
}
});
Este es el gráfico que se muestra en la web.
> La mejor solución
"options":{
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, //min
suggestedMax: 100 //max
}
}]
}
}
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps:10,
stepValue:5,
max:100
}
}]
Esto es para Charts.js 2.0:
La razón por la que algunos de estos no funcionan es porque debe declarar sus opciones cuando crea su gráfico de la siguiente manera:
$(function () {
var ctxLine = document.getElementById("myLineChart");
var myLineChart = new Chart(ctxLine, {
type: 'line',
data: dataLine,
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
}
}
});
})
La documentación para esto está aquí: http://www.chartjs.org/docs/#scales
Con 1.1.1, utilicé lo siguiente para arreglar la escala entre 0.0 y 1.0:
var options = {
scaleOverride: true,
scaleStartValue: 0,
scaleSteps: 10,
scaleStepWidth: 0.1
}
En mi caso, utilicé una devolución de llamada en tics yaxis, mis valores están en porcentaje y cuando alcanza el 100% no muestra el punto, utilicé esto:
yAxes: [{
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100.1,
callback: function(value, index, values) {
if (value !== 100.1) {
return values[index]
}
}
}
}],
Y funcionó bien.
Como ninguna de las sugerencias anteriores me ayudó con charts.js 2.1.4, lo resolví agregando el valor 0 a mi matriz de conjunto de datos (pero sin etiqueta adicional):
statsData.push(0);
[...]
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
data: statsData,
[...]
Estaba usando una versión anterior de la plantilla Flat Lab en varios proyectos míos que usaban v1.x de chart.js, de los cuales no estoy seguro, no pude actualizar a v2.x ya que tenía varios proyectos trabajando con él . Lo anterior (bardata,options)
no estaba funcionando para mí.
Así que aquí está el truco para la versión 1.x
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
Reemplácelo con:
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);
El gráfico tiene un valor "min" y "max". Documentación en este enlace
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html
scales
objeto en las versiones 2.x es bastante diferente. Vea la respuesta @OferSegev a continuación y la documentación 2.x aquí .