Chart.js format de nombre

Je suis allé sur le Chart.js la documentation et n'a pas trouvé quoi que ce soit sur le numéro de mise en forme
ie) de 1 000.02 de format de nombre "#,###.00"

J'ai aussi fait quelques tests de base et il semble que les graphiques ne pas accepter non de texte numérique pour ses valeurs

Quelqu'un a trouvé un moyen d'obtenir des valeurs formatées de façon à avoir le séparateur de milliers et un nombre fixe de décimales? Je voudrais avoir les valeurs de l'axe et les valeurs dans le tableau de mise en forme.

  • Quelqu'un a été capable de formater les cartes' chiffres?
  • La version de chart.js parlons-nous?
InformationsquelleAutor Ronald | 2014-09-17
  1. 21

    Il n'y a aucune fonctionnalité intégrée pour la mise en forme des nombres en Javascript. J'ai trouvé la solution la plus simple à la addCommas fonction sur cette page.

    Ensuite vous avez juste à modifier votre tooltipTemplate paramètre de ligne de votre Chart.defaults.global à quelque chose comme ceci:

    tooltipTemplate: "<%= addCommas(value) %>"

    Charts.js prendra soin du reste.

    Voici la addCommas fonction:

    function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
    • Merci beaucoup. Cela m'a permis de résoudre mon problème et j'ai pu le format de l'échelle ainsi avec: scaleLabel: "<%=addCommas(valeur)%>" Alors, puisque j'ai eu plusieurs séries, j'ai eu pour cible multiTooltipTemplate: "<%=addCommas(valeur)%>"
    • Im nouveau à chartjs, quelle est exactement la Chart.defaults.global ?
    • Le graphique.les valeurs par défaut.global vous permet de configurer tous les graphiques créés au lieu de le faire une à une.
    • La version de chart.js cela s'applique à?
    • Il apparaît que ce n'est plus d'application dans la version la plus récente
    InformationsquelleAutor Yacine B
  2. 16

    Pour les nombres à virgule formaté j'.e 3,443,440 . Vous pouvez simplement utiliser toLocaleString() fonction dans le tooltipTemplate .

    tooltipTemplate: "<%= datasetLabel %> - <%= valeur.toLocaleString() %>"

    • ce un travail meilleur pour moi 🙂
    • génial, merci!
    • Le plus court et en même temps bonne réponse!
    InformationsquelleAutor Sumanth
  3. 9

    Vous pouvez configurer le tooltipTemplate valeur de votre Chart.defaults.global avec une fonction de formatage de la valeur:

    tooltipTemplate : function(valueObj) {
            return formatNumber(valueObj.value, 2, ',',  '.');
}

    Voici la fonction format:

    function formatNumber(number, decimalsLength, decimalSeparator, thousandSeparator) {
       var n = number,
           decimalsLength = isNaN(decimalsLength = Math.abs(decimalsLength)) ? 2 : decimalsLength,
           decimalSeparator = decimalSeparator == undefined ? "," : decimalSeparator,
           thousandSeparator = thousandSeparator == undefined ? "." : thousandSeparator,
           sign = n < 0 ? "-" : "",
           i = parseInt(n = Math.abs(+n || 0).toFixed(decimalsLength)) + "",
           j = (j = i.length) > 3 ? j % 3 : 0;

       return sign +
           (j ? i.substr(0, j) + thousandSeparator : "") +
           i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousandSeparator) +
           (decimalsLength ? decimalSeparator + Math.abs(n - i).toFixed(decimalsLength).slice(2) : "");
}
    • Je ne suis pas sûr que c'est une réponse à la question qui était sur les formats de nombre.
    • J'utilise normalement pour la mise en forme de l'argent quantités, mais la fonction est égale à pour une mise en forme de nombres.
    • Merci pour l'aide. À l'époque, je ne comprends pas votre solution en raison de mon manque de connaissance de la chart.js de la bibliothèque. Cependant il y a une faute de frappe dans le tooltipTemplate où le paramètre "valueObj" a été référencé en tant que "valuesObj". Jusqu'votes.
    • Merci de me donner une touche sur la typo erreur. J'ai juste édité.
    InformationsquelleAutor Fran Herrero
  4. 9

    Solutions existantes n'a pas de travail pour moi dans Chart.js v2.5. La solution que j'ai trouvé:

    options: {
            scales: {
                yAxes: [{
                    ticks: {
                        callback: function (value) {
                            return numeral(value).format('$ 0,0')
                        }
                    }
                }]
            }
        }

    J'ai utilisé numeral.js, mais vous pouvez utiliser le addCommas la fonction proposée par Yacine, ou quoi que ce soit d'autre.

    InformationsquelleAutor andresgottlieb
  5. 8

    Pour ceux utilisant la Version: 2.5.0, ici, c'est une amélioration pour @andresgottlieb solution. Avec cela, vous pouvez également formater les montants dans les info-bulles de la carte, pas seulement les "tiques" dans le "yAxes'

        ...
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    callback: function(value, index, values) {
                        return '$ ' + number_format(value);
                    }
                }
            }]
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItem, chart){
                    var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                    return datasetLabel + ': $ ' + number_format(tooltipItem.yLabel, 2);
                }
            }
        }
    }

    Ici est la number_format() fonction que j'utilise:

    function number_format(number, decimals, dec_point, thousands_sep) {
//*     example: number_format(1234.56, 2, ',', ' ');
//*     return: '1 234,56'
number = (number + '').replace(',', '').replace(' ', '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec);
return '' + Math.round(n * k) / k;
};
//Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
    InformationsquelleAutor herohat
  6. 4

    Mettre tooltips dans "option" comme ceci:

    options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return tooltipItem.yLabel.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
}
}
}

    De référence de https://github.com/chartjs/Chart.js/pull/160.

    • c'est la seule qui a fonctionné pour moi, merci!
    InformationsquelleAutor Irfan Hafid Nugroho