Comment définir la limite inférieure de la valeur la plus élevée affichée sur l'axe Y ?

Question

J'ai un graphique linéaire chart.js dans lequel la valeur Y est un pourcentage de 0 à 100 et l'axe X représente le temps en secondes pour la dernière minute. Le graphique est alimenté par des données en direct provenant d'une connexion socket qui se met à jour toutes les cinq secondes.

Je rencontre un problème avec les étapes de l'axe Y générées dynamiquement par chart.js. Dans la plupart des cas, tout se passe bien et l'axe des ordonnées s'adapte à la plage de données actuellement affichée. Cependant, lorsque le pourcentage est de 0 % ou lorsqu'il se situe entre 0 et 1, par exemple 0,654 %, l'axe des ordonnées affiche une valeur minimale de 0 et une valeur maximale de 1 %. Par conséquent, le graphique est trompeur car il semble que le pourcentage est élevé alors qu'il est en fait inférieur à 1 %.

Ma question est donc la suivante : comment puis-je définir une valeur minimale pour la valeur maximale affichée le long de l'axe des Y ?

(Avant que vous ne tiriez des conclusions hâtives et que vous n'insistiez sur la propriété stepSize, j'ai essayé de définir des valeurs telles que 1 et 3 pour stepSize. Le problème, c'est que lorsque les valeurs de pourcentage atteignent 75 % ou plus, le grand nombre d'étiquettes requises (75/3 ou 75/1) finit par rendre les étiquettes illisibles).

Answer 1

Vous êtes à la recherche de la suggestedMax option de cochage pour l'axe des y. Utilisez-la comme ceci :

options: {
  scales: {
    yAxes: [{
      ticks: {
        suggestedMax: 60
      }
    }]
  }
}

Cette valeur de tic sera utilisée comme tic maximum de l'axe des y, à condition que toutes les valeurs de données soient inférieures à celle-ci. Si une valeur de données est supérieure à cette valeur de tic, une valeur de tic supérieure sera automatiquement calculée et utilisée à la place. À partir du docs :

suggéréMax

Nombre maximum défini par l'utilisateur pour la balance, remplace la valeur maximale sauf si elle est inférieure à la valeur maximale. maximale.

Vous pouvez le voir en action aquí et ci-dessous.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: 'Percentage',
      data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          suggestedMax: 60
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>