web-dev-qa-db-fra.com

Définir la taille minimale de pas dans le graphique js

J'utilise Chart.js version 2.0 pour dessiner des graphiques, je veux définir la taille minimale du pas dans un graphique à barres

var myNewChart = new Chart(grapharea, {
                type: 'bar',
                data: barData,
                options: {
                    responsive: true,                        
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    min: 0, // it is for ignoring negative step.
                                    beginAtZero: true,
                                    stepSize: 1  // if i use this it always set it '1', which look very awkward if it have high value  e.g. '100'.
                                }
                            }
                        ]
                    }
                }
            });

cette fois j'utilise

stepSize: 1

j'utilise cette taille de pas pour ignorer la valeur du point, par exemple. '0.5' , il indique quand la valeur maximale du graphique est inférieure à, par exemple, '2'.
Si je l’utilise, il définit toujours le pas 1, ce qui est très gênant s’il a une valeur élevée, par exemple. '100'.

Je cherche une chose pareille: suggéréeMin = 1

Existe-t-il quelque chose pour définir la taille minimale du pas qui ne devrait pas être fixée dans les cas de valeur plus élevée.

graphchart.js
22
Uzair Xlade

Si vous ne souhaitez pas afficher les étiquettes de valeur en points (par exemple 0,5), vous pouvez écrire une fonction de rappel pour filtrer les étiquettes de valeur en points au lieu d'utiliser stepSize.

Comme ça:

ticks: {
    min: 0, // it is for ignoring negative step.
    beginAtZero: true,
    callback: function(value, index, values) {
        if (Math.floor(value) === value) {
            return value;
        }
    }
}

Travail du violon ici: https://jsfiddle.net/ma7h611L/

Mise à jour:

Comme indiqué par Atta H. et Lekoaf ci-dessous, Chart.js a ajouté la propriété precision aux ticks. Il est disponible depuis la version 2.7.3. Voir Lekoaf's answer comment l'utiliser.

46
Daantie
ticks: {
    precision: 0
}

Cela a fonctionné aussi bien que la fonction de rappel ci-dessus et est beaucoup plus propre.

si précision est définie et que stepSize n’est pas spécifié, la taille du pas sera arrondie à ce nombre de décimales.

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

4
Lekoaf