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

17

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

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

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

    
задан Ronald 17.09.2014 в 03:10
источник

4 ответа

18

В 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, '' + ',' + '');
    }
    return x1 + x2;
}
    
ответ дан Yacine B 25.10.2014 в 23:43
источник
12

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

tooltipTemplate: "& lt;% = datasetLabel% & gt; - & lt;% = value.toLocaleString ()% & gt;"

    
ответ дан Sumanth 28.09.2015 в 06:58
источник
7

Вы можете установить значение 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, "" + thousandSeparator) +
           (decimalsLength ? decimalSeparator + Math.abs(n - i).toFixed(decimalsLength).slice(2) : "");
}
    
ответ дан Fran Herrero 04.03.2015 в 18:08
источник
4

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

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

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

    
ответ дан andresgottlieb 17.04.2017 в 20:59
источник