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?
Antworten:
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 .
min, maxund stepsizeAttribute des ticksNamespace
suggestedMaxfür den minimalen Spitzenwert
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [10, 80, 56, 60, 6, 45, 15],
fill: false,
backgroundColor: "#eebcde ",
borderColor: "#eebcde",
borderCapStyle: 'butt',
borderDash: [5, 5],
}]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Legend'
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, config);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<canvas id="canvas"></canvas>
</body>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
xAxesund in den Optionen yAxesverschachtelt werden sollten scales. Das und das ist neuer als die Antwort von Ofer Sergev, die richtig zu sein scheint, ist auch überraschend.
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
}
}]
}
};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
}
}]
}
}
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
scalesObjekt in den 2.x-Versionen ist ganz anders. Siehe die Antwort von @OferSegev unten und die 2.x-Dokumentation hier .