Cómo establecer el valor máximo y mínimo para el eje Y


177

Estoy usando un gráfico de líneas de http://www.chartjs.org/ ingrese la descripción de la imagen aquí

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:


68

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 
    });
}

50
Tenga en cuenta que esta respuesta es relevante para las versiones 1.x de chart.js. El scalesobjeto en las versiones 2.x es bastante diferente. Vea la respuesta @OferSegev a continuación y la documentación 2.x aquí .
Boaz

1
¿Existe documentación para v1.x también @Boaz
Black Mamba

1
@IshanMahajan Solía ​​haber :) Parece que ya no puedo encontrarlo. Creo que este es un buen espejo: web-beta.archive.org/web/20150816192112/http://…
Boaz

264

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.


33
consulta las min, maxy stepsizelos atributos del ticksespacio de nombres
Ralph Callaway

17
suggestedMaxpor el valor máximo mínimo
Finesse

61

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>


Funcionó bien en 2.4.0
Avinash

39

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

Me sorprende Esto funciona porque pensé que el xAxesy yAxesse suponía que eran anidado bajo scalesen las opciones. Además, esto es más nuevo que la respuesta de Ofer Sergev, que parece ser correcta, también es sorprendente.
claudekennilol

1
Mi gráfico presenta varias ecuaciones con mucho ruido. ¿Hay alguna manera de actualizar el valor máximo en tiempo real basado en el valor más grande de una de las ecuaciones? Por ejemplo, valor máximo + 100.
Martin Erlic

26

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
            }
        }]
    }
};

15

Las respuestas anteriores no funcionaron para mí. Posiblemente los nombres de las opciones se cambiaron desde el '11, pero lo siguiente me sirvió:

ChartJsProvider.setOptions
  scaleBeginAtZero: true

13
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


Gracias. Este funcionó para mí en v2.5 de chart.js. Simple y efectivo.
Ionut Necula

2
Los documentos son muy frustrantes ... Tengo que buscar ejemplos de personas para adivinar las opciones disponibles.
Adrian P.

Si alguien está usando JavaScript puro, esta respuesta es la correcta. Escribí un pequeño ejemplo usando esto y publiqué mi código js completo a continuación.
Ishara Amarasekera

9

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.

Porcentaje de vehículos en la ciudad.


9

> La mejor solución


  "options":{
                    scales: {
                                yAxes: [{
                                    display: true,
                                    ticks: {
                                        suggestedMin: 0, //min
                                        suggestedMax: 100 //max 
                                    }
                                }]
                            }
                    }

7

Simplemente configure el valor de scaleStartValue en sus opciones.

var options = {
   // ....
   scaleStartValue: 0,
}

Vea la documentación para esto aquí .


Esta respuesta es mejor para mí, ya que explica cómo elegir el valor de inicio de la escala, si no 0
Pechou

7
yAxes: [{
    display: true,
    ticks: {
        beginAtZero: true,
        steps:10,
        stepValue:5,
        max:100
    }
}]

1
Aunque este código puede responder la pregunta, proporcionar un contexto adicional con respecto a por qué y / o cómo responde la pregunta mejoraría significativamente su valor a largo plazo. Por favor, editar su respuesta a añadir un poco de explicación.
Toby Speight

7

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


¿Se está adaptando a los cambios en ChartJS que venían con la versión 2.0 (creo que la pregunta y la respuesta aceptada hace un año trataron con ChartJS 1.x). Quizás esta respuesta sería incluso más útil si se explica brevemente. Tal vez solo comente este comentario si el tiempo lo permite. Gracias.
Dilettant

3

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
}

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.


0

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,
[...]

0

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);

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.