Chart.js Zahlenformat

Question

ich über die Chart.js documentation ging und alles auf Nummer nicht Formatierung dh) 1,000.02 von Zahlenformat finden „#, ###. 00“

Ich habe auch einige grundlegende Tests und es scheint, Diagramme akzeptieren nicht-numerischen Text für seine Werte

Hat jemand einen Weg gefunden, um Werte zu erhalten, die formatiert werden, um Tausendertrennzeichen und eine feste Anzahl von Dezimalstellen zu haben? Ich möchte die Achsenwerte und -werte im Diagramm formatiert haben.

Answer 1

Es gibt keine integrierte Funktionalität für die Zahlenformatierung in Javascript. Ich fand die einfachste Lösung, die addCommas function on this page zu sein.

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

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

Charts.js Pflege des Restes.

Hier ist die addCommas Funktion:

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; 
} 

Answer 2

Sie können die tooltipTemplate Wert von Ihrem Chart.defaults.global mit einer Funktion den Wert auf die Formatierung ein:

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

Hier das Format Funktion:

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

Answer 3

Für Zahlen, die mit Komma formatiert werden sollen i .e 3,443,440. Sie können einfach die Funktion toLocaleString() in der TooltipTemplate verwenden.

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

Answer 4

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

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

I verwendet numeral.js, aber Sie können die addCommas Funktion von Yacine, oder irgendetwas anderes vorgeschlagen verwenden.

Answer 5

Für diejenigen, die Version 2.5.0 verwenden, ist hier eine Erweiterung für @andresgottlieb Lösung. Mit diesem können Sie auch die Mengen in Tooltips des Diagramms zu formatieren, nicht nur die ‚Ticks‘ in der ‚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 number_format() Funktion, was ich bin mit:

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); 
}