como definir o valor inicial como “0” no chartjs?

109

aqui está o meu código. eu preciso definir o valor inicial como "0" nas escalas dos eixos xey. Tentei a opção de escalas de versão mais recente.

graphOptions = {               
            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: false,    
            tooltipTitleTemplate: "<%= label%>",
            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: true,
            //Number - Tension of the bezier curve between points
            bezierCurveTension: 0.4,
            //Boolean - Whether to show a dot for each point
            pointDot: true,
            //Number - Radius of each point dot in pixels
            pointDotRadius: 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,               
            pointHitDetectionRadius: 20,               
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,               
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
        };
        var LineChart = new Chart(ctx).Line(graphData, graphOptions);
   }     
Suganthan Raj
fonte

Respostas:

298

Para Chart.js 2. *, a opção de a escala começar do zero está listada nas opções de configuração da escala linear . Isso é usado para dados numéricos, o que provavelmente deve ser o caso do eixo y. Então, você precisa usar isto:

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

Um gráfico de linha de amostra também está disponível aqui, onde a opção é usada para o eixo y. Se seus dados numéricos estiverem no eixo x, use em xAxesvez de yAxes. Observe que uma matriz (e plural) é usada para yAxes(ou xAxes), porque você também pode ter vários eixos.

xnakos
fonte
@SuganthanRaj De nada! Apenas certifique-se de consultar a documentação do Chart.js 2.0. Muita coisa mudou desde a versão 1.0 e a maioria dos exemplos online se aplica à versão 1.0. ;)
xnakos
@SuganthanRaj Por exemplo, o scaleShowVerticalLinesnão é válido para 2.0. Ou o modelo de dica de ferramenta. As opções, em geral, seguem uma abordagem hierárquica em 2.0.
xnakos
3

Se você precisar usá-lo como uma configuração padrão, basta colocar min: 0dentro do nó defaults.scale.ticks, da seguinte maneira:

defaults: {
  global: {...},
  scale: {
    ...
    ticks: { min: 0 },
  }
},

Referência: https://www.chartjs.org/docs/latest/axes/

tuliomarchetto
fonte
1

Adicione esta opção:

//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,

(Referência: Chart.js )

NB: A solução original que postei foi para Highcharts, se você não estiver usando Highcharts, remova a tag para evitar confusão

wmash
fonte
2
não está funcionando . Estou usando a versão mais recente do chartjs v2.1
Suganthan Raj
@wmash, preciso iniciar o gráfico a partir do valor predefinido. Você sabe como fazer isso? Tentei colocar essa opção em verdadeiro e falso, mas não funcionou.
Michael.D
isso está incorreto e pode / deve ser excluído. beginAtZero: trueé o que você precisa
triplo em