Формат номера Chart.js

Я просмотрел документацию Chart.js и ничего не нашел в форматировании чисел т.е.) 1,000.02 из формата чисел "#, ###. 00"

Я также сделал некоторые базовые тесты, и, похоже, диаграммы не принимают нечисловой текст для его значений

Кто-нибудь нашел способ получить значения, отформатированные, чтобы иметь разделитель тысяч и фиксированное число десятичных знаков? Я хотел бы иметь значения и значения оси в отформатированной диаграмме.

Ответы

Ответ 1

В Javascript нет встроенных функций для форматирования чисел. Я нашел, что самым простым решением является функция addCommas на этой странице.

Затем вам просто нужно изменить строку параметров tooltipTemplate с вашего Chart.defaults.global на следующее:

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

Charts.js позаботится об остальном.

Здесь функция 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;
}

Ответ 2

Для чисел, которые должны быть отформатированы в запятой, т.е. 3,443,440. Вы можете просто использовать функцию toLocaleString() в tooltipTemplate.

tooltipTemplate: "<% = datasetLabel% > - <% = значение .toLocaleString()% > "

Ответ 3

Вы можете настроить значение tooltipTemplate из Chart.defaults.global с помощью функции форматирования значения:

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

Здесь функция формата:

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

Ответ 4

Существующие решения не работали для меня в Chart.js v2.5. Решение, которое я нашел:

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

Я использовал numeral.js, но вы можете использовать функцию addCommas, предложенную Yacine, или что-то еще.