So stellen Sie den Max- und Min-Wert für die Y-Achse ein

Ich benutze Liniendiagramm von http://www.chartjs.org/.

Wie Sie sehen können, werden der Maximalwert (130) und der Minimalwert (60) für die Y-Achse automatisch ausgewählt. Ich möchte einen Maximalwert = 500 und einen Minimalwert = 0. Ist das möglich?

Sie müssen die Skala überschreiben, versuchen Sie Folgendes:

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

Verwenden Sie für chart.js V2 (Beta):

var options = {
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                // OR //
                beginAtZero: true   // minimum value will be 0.
            }
        }]
    }
};

Weitere Informationen finden Sie in der Dokumentation zu chart.js zur Konfiguration der Linearachsen .

ChartJS v2.4.0

Wie in den Beispielen unter https://github.com/jtblin/angular-chart.js am 7. Februar 2017 gezeigt (da dies häufig geändert zu werden scheint):

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

Dies führt zu 5 y-Achsenwerten als solchen:

100
80
60
40
20
0

Schreiben Sie dies im Jahr 2016, während Chart js 2.3.0 das neueste ist. Hier ist, wie man es ändern kann

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

Die obigen Antworten haben bei mir nicht funktioniert. Möglicherweise wurden die Optionsnamen seit '11 geändert, aber das Folgende hat den Trick für mich getan:

ChartJsProvider.setOptions
  scaleBeginAtZero: true

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

Ich konfiguriere mit 'Optionen' in v2.

Sie sollten die Dokumentation lesen: http://www.chartjs.org/docs/#scales-linear-scale

Ich habe ein js geschrieben, um Werte von 0 bis 100 in der y-Achse mit einer Lücke von 20 anzuzeigen.

Dies ist meine 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,
        }
      }]
    }
  }
});

Dies ist das im Web angezeigte Diagramm.

> Beste Lösung

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

Legen Sie einfach den Wert für scaleStartValue in Ihren Optionen fest.

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

Die Dokumentation hierzu finden Sie hier .

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

Dies ist für Charts.js 2.0:

Der Grund, warum einige davon nicht funktionieren, ist, dass Sie Ihre Optionen deklarieren sollten, wenn Sie Ihr Diagramm wie folgt erstellen:

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

    });
})

Die Dokumentation hierzu finden Sie hier: http://www.chartjs.org/docs/#scales

Mit 1.1.1 habe ich Folgendes verwendet, um die Skala zwischen 0.0 und 1.0 festzulegen:

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

In meinem Fall habe ich einen Rückruf in Yaxis-Ticks verwendet. Meine Werte sind in Prozent angegeben. Wenn 100% erreicht sind, wird der Punkt nicht angezeigt. Ich habe Folgendes verwendet:

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

Und es hat gut funktioniert.

Da mir keiner der obigen Vorschläge bei charts.js 2.1.4 geholfen hat, habe ich es gelöst, indem ich meinem Datensatzarray den Wert 0 hinzugefügt habe (aber keine zusätzliche Bezeichnung):

statsData.push(0);

[...]

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

Ich habe eine alte Version der Flat Lab-Vorlage in mehreren meiner Projekte verwendet, in denen v1.x von chart.js verwendet wurde, bei denen ich mir nicht sicher bin. Ich konnte nicht auf v2.x aktualisieren, da bereits mehrere Projekte damit arbeiteten . Das oben Erwähnte(bardata,options) bei mir nicht funktioniert.

Also hier ist der Hack für Version 1.x.

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

Ersetzen Sie es durch:

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

Diagramm haben einen "Min" - und "Max" -Wert. Dokumentation zu diesem Link

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html