wake-up-neo.com

Chart.js Zahlenformat

Ich habe die Chart.js Dokumentation durchgesehen und nichts zur Zahlenformatierung gefunden, dh) 1,000.02 vom Zahlenformat "#, ###. 00"

Ich habe auch einige grundlegende Tests durchgeführt und es scheint, dass Diagramme keinen nicht numerischen Text für ihre Werte akzeptieren

Hat jemand eine Möglichkeit gefunden, Werte mit Tausendertrennzeichen und einer festen Anzahl von Dezimalstellen zu formatieren? Ich möchte die Achsenwerte und Werte im Diagramm formatieren lassen.

24
Ronald

Es gibt keine eingebaute Funktionalität für die Zahlenformatierung in Javascript. Ich fand die einfachste Lösung die addCommas Funktion auf dieser Seite .

Dann müssen Sie nur noch Ihre tooltipTemplate Parameterzeile von Ihrem Chart.defaults.global zu so etwas:

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

Den Rest erledigt Charts.js.

Hier ist die Funktion 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

Für kommaformatierte Zahlen, d. H. 3.443.440. Sie können nur die Funktion toLocaleString () in der TooltipTemplate verwenden.

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

16
Sumanth

Bestehende Lösungen funktionierten in Chart.js v2.5 nicht für mich. Die Lösung, die ich gefunden habe:

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

Ich habe numeral.js verwendet, aber Sie können die von Yacine vorgeschlagene Funktion addCommas oder etwas anderes verwenden.

10
andresgottlieb

Sie können den tooltipTemplate-Wert von Ihrem Chart.defaults.global Mit einer Funktion zum Formatieren des Werts einrichten:

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

Hier ist die Formatfunktion:

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

Für diejenigen, die Version: 2.5.0 verwenden, ist hier eine Erweiterung für die @ andresgottlieb-Lösung. Hiermit können Sie auch die Beträge in QuickInfos des Diagramms formatieren, nicht nur die 'Häkchen' in den '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);
                }
            }
        }
    }

Hier ist die Funktion number_format (), die ich verwende:

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

Setze tooltips in 'option' wie folgt ein:

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

Referenz von https://github.com/chartjs/Chart.js/pull/16 .

5