come impostare il valore iniziale come "0" in chartjs?


109

ecco il mio codice. ho bisogno di impostare il valore iniziale come "0" in entrambe le scale degli assi xey. Ho provato l'ultima opzione di scalabilità della versione.

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

Risposte:


298

Per Chart.js 2. *, l'opzione per la scala che inizia da zero è elencata sotto le opzioni di configurazione della scala lineare . Viene utilizzato per i dati numerici, che molto probabilmente dovrebbe essere il caso dell'asse y. Quindi, devi usare questo:

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

Un grafico linea del campione è disponibile anche qui in cui l'opzione viene utilizzata per l'asse y. Se i tuoi dati numerici sono sull'asse x, usa xAxesinvece di yAxes. Nota che un array (e un plurale) viene utilizzato per yAxes(o xAxes), perché potresti anche avere più assi.


@SuganthanRaj Sei il benvenuto! Assicurati solo di consultare i documenti per Chart.js 2.0. Molte cose sono cambiate dalla versione 1.0 e la maggior parte degli esempi online si applica alla versione 1.0. ;)
xnakos

@SuganthanRaj Ad esempio, scaleShowVerticalLinesnon è valido per 2.0. O il modello della descrizione comando. Le opzioni, in generale, seguono un approccio gerarchico nella 2.0.
xnakos


1

Aggiungi questa opzione:

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

(Riferimento: Chart.js )

NB: La soluzione originale che ho pubblicato era per Highcharts, se non stai usando Highcharts rimuovi il tag per evitare confusione


2
la sua non funziona . Sto usando l'ultima versione di chartjs v2.1
Suganthan Raj,

@wmash Ho bisogno di avviare il grafico dal valore predefinito. Sai come farlo? Ho provato a mettere questa opzione sia su vero che su falso, ma non funziona.
Michael.D

questo non è corretto e potrebbe / dovrebbe essere cancellato. beginAtZero: trueè quello che ti serve
tripla
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.