web-dev-qa-db-fra.com

Chart.js - Mise en forme de l'axe Y

J'utilise Chart.js pour dessiner un graphique en barres simple et j'ai besoin de formater son axe Y comme

123456,05 à 123 456,05 $

Je ne comprends pas comment utiliser scaleLabel : "<%=value%>"

J'ai vu quelqu'un pointant à " JS Micro-Templating ",
mais aucune idée de comment utiliser cela avec notre option scaleLabel.

Est-ce que quelqu'un sait comment formater cet axe Y, et peut-être me donner un exemple?

string-formattingchart.js
53
Pierre de LESPINAY

J'ai eu le même problème, je pense dans Chart.js 2.x.x l'approche est légèrement différente comme ci-dessous.

ticks: {
    callback: function(label, index, labels) {
        return label/1000+'k';
    }
}

Plus en détail

var options = {
    scales: {
        yAxes: [
            {
                ticks: {
                    callback: function(label, index, labels) {
                        return label/1000+'k';
                    }
                },
                scaleLabel: {
                    display: true,
                    labelString: '1k = 1000'
                }
            }
        ]
    }
}
112
Jaison

Une fonctionnalité non documentée de la bibliothèque ChartJS est que si vous transmettez une fonction au lieu d'une chaîne, elle utilisera votre fonction pour restituer le scaleLabel de l'axe des ordonnées.

Donc, pendant que "<%= Number(value).toFixed(2).replace('.',',') + ' $' %>" fonctionne, vous pouvez aussi faire:

scaleLabel: function (valuePayload) {
    return Number(valuePayload.value).toFixed(2).replace('.',',') + '$';
}

Si vous faites quelque chose de compliqué à distance, je vous recommande de le faire à la place. 

54
jacobangel
scaleLabel : "<%= Number(value).toFixed(2).replace('.', ',') + ' $'%>"
13
vicentedealencar

Comme Nevercom a déclaré que scaleLable devrait contenir du javascript, pour manipuler la valeur y, appliquez simplement le formatage requis.

Notez que la valeur est une chaîne. 

var options = {      
    scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2)   %>"
};

Exemple jsFiddle

si vous souhaitez définir une échelle manuelle, vous pouvez utiliser scaleOverride.

var options = {      
    scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2)   %>",

    scaleOverride: true,
    scaleSteps: 10,
    scaleStepWidth: 10,
    scaleStartValue: 0

};

Exemple jsFiddle

5
Stuart

Ici vous pouvez trouver un bon exemple de la façon de formater la valeur de l'axe des ordonnées.

En outre, vous pouvez utiliser le scaleLabel : "<%=value%>" que vous avez mentionné. Cela signifie que tout ce qui est compris entre les balises <%= et %> sera traité comme du code javascript (vous pouvez utiliser des états if ...

2
Nevercom

Chart.js 2.X.X 

Je sais que ce post est vieux. Mais si quelqu'un cherche une solution plus flexible, le voici:

var options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    callback: function(label, index, labels) {
                        return Intl.NumberFormat().format(label);
                        // 1,350

                        return Intl.NumberFormat('hi', { 
                            style: 'currency', currency: 'INR', minimumFractionDigits: 0, 
                        }).format(label).replace(/^(\D+)/, '$1 ');
                        // ₹ 1,350

                        // return Intl.NumberFormat('hi', {
                            style: 'currency', currency: 'INR', currencyDisplay: 'symbol', minimumFractionDigits: 2 
                        }).format(label).replace(/^(\D+)/, '$1 ');
                        // ₹ 1,350.00
                    }
                }
            }]
        }
    }

'salut' est l'hindi. Vérifiez ici pour les autres arguments locales
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation#locales_argument

pour plus de symbole monétaire
https://www.currency-iso.org/fr/home/tables/table-a1.html

0
TheHive