it-swarm.com.de

wie man Startwert als "0" in den chartjs einstellt?

hier ist mein Code. Ich muss den Anfangswert auf der x- und der y-Achse auf "0" setzen. Ich habe versucht, die neueste Version zu skalieren.

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);
   }     
75
Suganthan Raj

Für Chart.js 2. * ist die Option, dass die Skala bei Null beginnt, unter 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. Also müssen Sie dies verwenden:

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

Ein Beispiel-Liniendiagramm ist ebenfalls verfügbar hier wobei die Option für die y-Achse verwendet wird. Wenn sich Ihre numerischen Daten auf der x-Achse befinden, verwenden Sie xAxes anstelle von yAxes. Beachten Sie, dass ein Array (und ein Plural) für yAxes (oder xAxes) verwendet wird, da Sie auch mehrere Achsen haben können.

203
xnakos

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 )

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

1
wmash

Wenn Sie es wie mich benötigen, müssen Sie es möglicherweise als Standardkonfiguration verwenden. Platzieren Sie einfach min: 0 innerhalb des Knotens defaults.scale.ticks, wie folgt:

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

Referenz: https://www.chartjs.org/docs/latest/axes/

0
tuliomarchetto