Wie setze ich den Startwert in chartjs auf "0"?


109

Hier ist mein Code. Ich muss den Anfangswert sowohl in der x- als auch in der y-Achsenskala auf "0" setzen. Ich habe die neueste Version der Skalenoption ausprobiert.

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

Antworten:


296

Für Chart.js 2. * ist die Option, dass die Skala bei Null beginnt, unter den Konfigurationsoptionen der linearen Skala aufgeführt . Dies wird für numerische Daten verwendet, was höchstwahrscheinlich für Ihre y-Achse der Fall sein sollte. Sie müssen also Folgendes verwenden:

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

Hier ist auch ein Beispielliniendiagramm verfügbar , in dem die Option für die y-Achse verwendet wird. Wenn sich Ihre numerischen Daten auf der x-Achse befinden, verwenden Sie xAxesanstelle von yAxes. Beachten Sie, dass für yAxes(oder xAxes) ein Array (und ein Plural) verwendet wird , da Sie auch mehrere Achsen haben können.


@SuganthanRaj Gern geschehen! Stellen Sie einfach sicher, dass Sie die Dokumente für Chart.js 2.0 konsultieren. Gegenüber der Version 1.0 hat sich viel geändert, und die meisten Online-Beispiele gelten für die Version 1.0. ;)
xnakos

@SuganthanRaj Zum Beispiel ist das scaleShowVerticalLinesfür 2.0 nicht gültig. Oder die Tooltip-Vorlage. Optionen folgen in 2.0 im Allgemeinen einem hierarchischen Ansatz.
Xnakos


1

Bitte fügen Sie diese Option hinzu:

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

(Referenz: Chart.js )

NB: Die ursprüngliche Lösung, die ich veröffentlicht habe, war für Highcharts. Wenn Sie keine Highcharts verwenden, entfernen Sie bitte das Tag, um Verwirrung zu vermeiden


2
es funktioniert nicht . Ich benutze die neueste Version von ChartJS v2.1
Suganthan Raj

@wmash Ich muss das Diagramm mit dem vordefinierten Wert starten. Wissen Sie, wie das geht? Ich habe versucht, diese Option sowohl auf wahr als auch auf falsch zu setzen, aber sie funktioniert nicht.
Michael.D

Dies ist falsch und könnte / sollte gelöscht werden. beginAtZero: trueist was Sie brauchen
dreifach
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.