Como definir o valor máximo e mínimo para o eixo Y


177

Estou usando o gráfico de linhas de http://www.chartjs.org/ insira a descrição da imagem aqui

Como você pode ver o valor máximo (130) e o valor mínimo (60) para o eixo Y são escolhidos automaticamente, quero o valor máximo = 500 e o valor mínimo = 0. Isso é possível?

Respostas:


68

Você deve substituir a escala, tente o seguinte:

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
Observe que esta resposta é relevante para as versões 1.x do chart.js O scalesobjeto nas versões 2.x é bem diferente. Consulte a resposta do @OferSegev abaixo e a documentação 2.x aqui .
Boaz

1
Existe documentação para v1.x bem @Boaz
Black Mamba

1
@IshanMahajan Costumava haver :) Parece que não consigo mais encontrá-lo. Eu acho que esse é um bom espelho: web-beta.archive.org/web/20150816192112/http://…
Boaz


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>


Funcionou muito bem no 2.4.0
Avinash

39

ChartJS v2.4.0

Conforme mostrado nos exemplos em https://github.com/jtblin/angular-chart.js no dia 7 de fevereiro de 2017 (já que isso parece estar sujeito a alterações frequentes):

var options = {
    yAxes: [{
        ticks: {
            min: 0,
            max: 100,
            stepSize: 20
        }
    }]
}

Isso resultará em valores do eixo y de 5 como tais:

100
80
60
40
20
0

Estou surpreso que isso funcione porque eu pensei que o xAxese yAxesdeveria estar aninhado scalesnas opções. Que mais isso é mais recente que a resposta de Ofer Sergev, que parece estar correta, também é surpreendente.
claudekennilol

1
Meu gráfico apresenta várias equações com muito ruído. Existe uma maneira de atualizar o valor máximo em tempo real com base no maior valor de uma das equações? Por exemplo, valor máximo + 100.
Martin Erlic 14/04/19

26

Escrevendo isso em 2016, enquanto o Chart js 2.3.0 é o mais recente. Aqui está como alguém pode mudar isso

var options = {
    scales: {
        yAxes: [{
            display: true,
            stacked: true,
            ticks: {
                min: 0, // minimum value
                max: 10 // maximum value
            }
        }]
    }
};

15

As respostas acima não funcionaram para mim. Possivelmente, os nomes das opções foram alterados desde 11, mas o seguinte fez o truque para mim:

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

Eu configuro com 'opções' na v2.

Você deve ler a documentação: http://www.chartjs.org/docs/#scales-linear-scale


Obrigado. Este funcionou para mim na versão 2.5 do chart.js. Simples e eficaz.
Ionut Necula

2
Os documentos são tão frustrantes ... Preciso procurar exemplos de pessoas para adivinhar as opções disponíveis.
Adrian P.

Se alguém estiver usando javascript puro, esta resposta é a correta. Escrevi um pequeno exemplo usando isso e postei meu código js completo abaixo.
Ishara Amarasekera

9

Eu escrevi um js para exibir valores de 0 a 100 no eixo y com um intervalo de 20.

Este é o meu 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 é o gráfico exibido na web.

Porcentagem de veículos na cidade


9

> Melhor Solução


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

7

Basta definir o valor para scaleStartValue em suas opções.

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

Veja a documentação para isso aqui .


Esta resposta é melhor para mim, pois explicita como escolher o valor de início de escala, se não for 0
Pechou

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

1
Embora esse código possa responder à pergunta, fornecer um contexto adicional sobre por que e / ou como responde à pergunta melhoraria significativamente seu valor a longo prazo. Por favor edite sua resposta para adicionar alguma explicação.
Toby Speight

7

Isto é para Charts.js 2.0:

A razão pela qual algumas delas não estão funcionando é porque você deve declarar suas opções ao criar seu gráfico da seguinte maneira:

$(function () {
    var ctxLine = document.getElementById("myLineChart");
    var myLineChart = new Chart(ctxLine, {
        type: 'line',
        data: dataLine,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        beginAtZero: true
                    }
                }]
            }
        }

    });
})

A documentação para isso está aqui: http://www.chartjs.org/docs/#scales


Isso está se adaptando às mudanças no ChartJS que vieram com a versão 2.0 (acho que a pergunta e a resposta aceita há um ano tratavam do ChartJS 1.x). Talvez essa resposta seja ainda mais útil se isso for explicado em breve. Talvez apenas comente esse comentário se o tempo permitir. Obrigado.
Diletante

3

Com 1.1.1, usei o seguinte para fixar a escala entre 0,0 e 1,0:

var options = {
    scaleOverride: true,
    scaleStartValue: 0,
    scaleSteps: 10,
    scaleStepWidth: 0.1
}

1

No meu caso, usei um retorno de chamada em ticks yaxis, meus valores estão em porcentagem e, quando chega a 100%, não mostra o ponto, usei o seguinte:

      yAxes: [{
                   ticks: {
                       beginAtZero: true,
                       steps: 10,
                       stepValue: 5,
                       max: 100.1,
                       callback: function(value, index, values) {
                           if (value !== 100.1) {
                               return values[index]
                           }
                       }
                   }
               }],

E funcionou bem.


0

Como nenhuma das sugestões acima me ajudou com o charts.js 2.1.4, resolvi adicionando o valor 0 à minha matriz de conjunto de dados (mas sem rótulo extra):

statsData.push(0);

[...]

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        datasets: [{
            data: statsData,
[...]

0

Eu estava usando uma versão antiga do modelo do Flat Lab em vários projetos meus que estavam usando a v1.x do chart.js, da qual não tenho certeza. . O que foi mencionado acima(bardata,options) não estava funcionando para mim.

Então aqui está o hack para a versão 1.x

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);

Substitua por:

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.