web-dev-qa-db-fra.com

Format numérique Chart.js

J'ai parcouru la documentation Chart.js et je n'ai rien trouvé sur la mise en forme des nombres, c.-à-d.) 1000,02 du format numérique "#, ###. 00"

J'ai également fait quelques tests de base et il semble que les graphiques n'acceptent pas le texte non numérique pour ses valeurs

Quelqu'un a-t-il trouvé un moyen d'obtenir des valeurs formatées pour avoir un séparateur de milliers et un nombre fixe de décimales? Je souhaite que les valeurs des axes et les valeurs du graphique soient formatées.

javascriptchartsformattingnumber-formattingchart.js
24
Ronald

Il n'y a pas de fonctionnalité intégrée pour le formatage des nombres en Javascript. J'ai trouvé que la solution la plus simple était la fonction addCommas sur cette page .

Ensuite, il vous suffit de modifier votre ligne de paramètres tooltipTemplate à partir de votre Chart.defaults.global à quelque chose comme ça:

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

Charts.js s'occupe du reste.

Voici la fonction addCommas:

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;
}
21
Yacine B

Pour que les nombres soient formatés en virgule, c'est-à-dire 3,443,440. Vous pouvez simplement utiliser la fonction toLocaleString () dans le tooltipTemplate.

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

16
Sumanth

Les solutions existantes n'ont pas fonctionné pour moi dans Chart.js v2.5. La solution que j'ai trouvée:

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

J'ai utilisé numeral.js , mais vous pouvez utiliser la fonction addCommas proposée par Yacine, ou toute autre chose.

10
andresgottlieb

Vous pouvez configurer la valeur tooltipTemplate à partir de votre Chart.defaults.global avec une fonction pour formater la valeur:

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

Voici la fonction de formatage:

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) : "");
}
9
Fran Herrero

Pour ceux qui utilisent la version: 2.5.0, voici une amélioration pour la solution @andresgottlieb. Avec cela, vous pouvez également formater les montants dans les info-bulles du graphique, pas seulement les "ticks" dans les "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);
                }
            }
        }
    }

Voici la fonction number_format () 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);
}
8
herohat

Mettez tooltips dans 'option' comme ceci:

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

Référence de https://github.com/chartjs/Chart.js/pull/16 .

5
Irfan Hafid Nugroho