Sauter les points décimaux sur l'axe des y dans chartJS

Question

J'utilise ce bibliothèque pour dessiner des graphiques dans mon application web. Le problème est que j'ai des points décimaux dans mon axe des ordonnées. Vous pouvez le voir dans l'image ci-dessous

Existe-t-il un moyen de le restreindre aux seuls chiffres ?

Voici mon code

var matches = $("#matches").get(0).getContext("2d");

var data = {
        labels: labelsFromCurrentDateTillLastWeek,
        datasets: [
            {
                label: "Last Weeks Matches",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: result
            }
        ]
    };

    var options = {
        scaleLabel: function (label) {
            return Math.round(label.value);
        }
    };

    var myLineChart = new Chart(matches, {
        type: 'bar',
        data: data,
        options: options

    })

Answer 1

Mise à jour : veuillez voir une réponse mise à jour de @DreamTeK qui montre comment cela peut maintenant être fait dans le cadre de l'API Chartjs. https://stackoverflow.com/a/54006487/2737978

---

dans chartjs 2.x vous pouvez passer une option pour un userCallback au champ de tic-tac de l'axe des y. Vous pouvez ainsi vérifier si l'étiquette est un nombre entier.

voici un exemple

 options = {
     scales: {
         yAxes: [{
             ticks: {
                 beginAtZero: true,
                 userCallback: function(label, index, labels) {
                     // when the floored value is the same as the value we have a whole number
                     if (Math.floor(label) === label) {
                         return label;
                     }

                 },
             }
         }],
     },
 }

exemple de violon

Answer 2

Mise à jour de 2019

Cela peut maintenant être facilement réalisé en utilisant le precision option :

ticks: {
  precision:0
}

Conformément à la documentation .

Si elle est définie et que stepSize n'est pas spécifié, la taille de l'étape sera arrondie à ce nombre de décimales.

EXEMPLE

options: {
  scale: {
    ticks: {
      precision: 0
    }
  }
}

OU (axe unique)

options: {
  scales: {
    xAxes: [{
      ticks: {
        precision: 0
      }
    }]
  }
}

Answer 3

Une autre solution consiste à utiliser l'option fixedStepSize comme suit :

options = {
    scales: {
        yAxes: [{
            ticks: {
                fixedStepSize: 1
            }
        }],
    },
};

Answer 4

Dans la dernière version, cette option est devenue

scales: {
  yAxes: [{
    ticks: {
      stepSize: 1,
      beginAtZero: true,
    },
  }],
},

Answer 5

La solution la plus simple et la plus directe consiste à ajouter ces configurations à votre objet d'options :

    scales: {
  yAxes: [
    {
      ticks: {
        precision: 0,
        beginAtZero: true,
      },
    },
  ],
},

et définissez les Axes (Dans mon cas c'est les yAxes) en fonction de vos axes avec des fractions