Chart.js định dạng số

Question

tôi đã đi qua Chart.js documentation và không tìm thấy bất cứ điều gì về định dạng số tức) 1,000.02 từ định dạng số "#, ###. 00"

Tôi cũng đã làm một số xét nghiệm cơ bản và có vẻ như biểu đồ không chấp nhận văn bản không phải là số cho các giá trị của nó

Có ai tìm cách lấy giá trị được định dạng để có dấu tách hàng nghìn và số chữ số thập phân cố định không? Tôi muốn có giá trị và giá trị trục trong biểu đồ được định dạng.

Answer 1

Không có chức năng tích hợp để định dạng số trong Javascript. Tôi tìm thấy giải pháp dễ nhất là addCommas function on this page.

Sau đó, bạn chỉ cần phải thay đổi dòng tooltipTemplate tham số của bạn từ Chart.defaults.global của bạn để một cái gì đó như thế này:

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

Charts.js sẽ chăm sóc phần còn lại.

Đây là addCommas chức năng:

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

Bạn có thể thiết lập giá trị tooltipTemplate từ Chart.defaults.global của bạn với một chức năng để định dạng giá trị:

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

Dưới đây là các chức năng định dạng:

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

Đối với các số được định dạng bằng dấu phẩy i .e 3,443,440. Bạn chỉ có thể sử dụng hàm toLocaleString() trong tooltipTemplate.

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

Answer 4

giải pháp hiện tại không làm việc cho tôi trong Chart.js v2.5. Các giải pháp tôi thấy:

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

tôi đã sử dụng numeral.js, nhưng bạn có thể sử dụng chức năng addCommas bởi Yacine gợi ý, hoặc bất cứ điều gì khác.

Answer 5

Đối với những người sử dụng Phiên bản: 2.5.0, dưới đây là phần nâng cao cho giải pháp @andresgottlieb. Với điều này, bạn cũng có thể định dạng số trong tooltips của bảng xếp hạng, không chỉ là 've' trong '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); 
       } 
      } 
     } 
    } 

Đây là number_format() chức năng là những gì tôi đang sử dụng:

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