ChartJS: Comment définir les valeurs max et min pour l'axe Y
J'utilise un graphique linéaire de http://www.chartjs.org/
Comme vous pouvez voir la valeur maximale (130) et la valeur minimale (60) pour l'axe Y sont automatiquement choisies, je veux une valeur maximale = 500 et une valeur minimale = 0. Est-ce possible?
Vous devez remplacer la balance, essayez ceci:
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
});
}
Pour chart.js V2 (beta), utilisez:
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.
}
}]
}
};
Voir la documentation chart.js sur la configuration des axes linéaires pour plus de détails.
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
Comme le montrent les exemples sur https://github.com/jtblin/angular-chart.js le 7 février 2017 (cela semble sujet à de fréquents changements):
var options = {
yAxes: [{
ticks: {
min: 0,
max: 100,
stepSize: 20
}
}]
}
Cela donnera 5 valeurs d'axe des ordonnées telles que:
100
80
60
40
20
0
Cela a été écrit en 2016 alors que le graphique js 2.3.0 est le dernier. Voici comment on peut le changer
var options = {
scales: {
yAxes: [{
display: true,
stacked: true,
ticks: {
min: 0, // minimum value
max: 10 // maximum value
}
}]
}
};
Les réponses ci-dessus n'ont pas fonctionné pour moi. Les noms des options ont peut-être été modifiés depuis '11, mais voici ce qui a fonctionné pour moi:
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
}
}]
}
}
});
Je configure avec 'options' dans v2.
Vous devriez lire la documentation: http://www.chartjs.org/docs/#scales-linear-scale
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps:10,
stepValue:5,
max:100
}
}]
Ceci est pour Charts.js 2.0:
La raison pour laquelle certaines d’entre elles ne fonctionnent pas est que vous devez déclarer vos options lorsque vous créez votre graphique, comme suit:
$(function () {
var ctxLine = document.getElementById("myLineChart");
var myLineChart = new Chart(ctxLine, {
type: 'line',
data: dataLine,
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
}
}
});
})
La documentation à cet effet se trouve ici: http://www.chartjs.org/docs/#scales
Il suffit de définir la valeur pour scaleStartValue dans vos options.
var options = {
// ....
scaleStartValue: 0,
}
Voir la documentation pour cela ici .
Avec 1.1.1, j’ai utilisé ce qui suit pour fixer l’échelle entre 0.0 et 1.0:
var options = {
scaleOverride: true,
scaleStartValue: 0,
scaleSteps: 10,
scaleStepWidth: 0.1
}
Les graphiques ont une valeur "min" et "max". Documentation sur ce lien
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html
J'ai écrit un js pour afficher les valeurs de 0 à 100 en ordonnée avec un écart de 20.
C'est mon 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,
}
}]
}
}
});C'est le graphique affiché sur le web.
J'utilisais une ancienne version du modèle Flat Lab dans plusieurs de mes projets, qui utilisaient la v1.x de chart.js dont je ne suis pas sûr. Je ne pouvais pas mettre à jour la v2.x, car plusieurs projets fonctionnaient déjà avec elle . Le (bardata,options) mentionné ci-dessus ne fonctionnait pas pour moi.
Alors, voici le hack pour la version 1.x
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
Remplacez-le par:
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);
Comme aucune des suggestions ci-dessus ne m'a aidé avec charts.js 2.1.4, je l'ai résolu en ajoutant la valeur 0 à mon tableau d'ensembles de données (mais sans étiquette supplémentaire):
statsData.Push(0);
[...]
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
data: statsData,
[...]
Dans mon cas, j'ai utilisé un rappel dans les ticks yaxis, Mes valeurs sont exprimées en pourcentage et lorsqu'il atteint 100%, il ne montre pas le point, j'ai utilisé ceci:
yAxes: [{
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100.1,
callback: function(value, index, values) {
if (value !== 100.1) {
return values[index]
}
}
}
}],
Et ça a bien fonctionné.