web-dev-qa-db-fra.com

Ignorer les points décimaux sur l’axe des Y du graphiqueJS

J'utilise la bibliothèque this 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 voir cela dans l'image ci-dessous enter image description here

Y a-t-il un moyen de le restreindre à seulement des chiffres?

C'est 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

    })
javascriptchart.js
46
mohsinali1317

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

dans chartjs 2.x, vous pouvez passer une option pour un userCallback au champ tick de yaxis. En cela, vous pouvez 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

101
Quince

Mise à jour 2019

Ceci peut maintenant être facilement réalisé en utilisant l'option precision:

ticks: {
  precision:0
}

Selon le documentation .

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

28
DreamTeK

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

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