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

19

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

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

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

    
задан Ronald 17.09.2014 в 03:10
источник
  • Кто-нибудь мог отформатировать номера диаграмм? –  Ronald 02.10.2014 в 20:44
  • В какой версии chart.js мы говорим? –  Stewart 22.10.2016 в 14:32

5 ответов

19

В 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
источник
  • Большое спасибо. Это позволило мне решить мою проблему, и мне удалось отформатировать масштаб, а также: scaleLabel: «<% = addCommas (value)%>». Тогда, поскольку у меня было несколько серий, мне пришлось таргетинг на multiTooltipTemplate: «<% = addCommas ( значение)%>» –  Ronald 14.04.2015 в 04:26
  • Я новичок в chartjs, что такое Chart.defaults.global? –  undroid 03.12.2015 в 15:57
  • Chart.defaults.global позволяет настроить все диаграммы, которые создаются, вместо того, чтобы настраивать их по одному за раз. –  Ronald 17.03.2016 в 20:29
  • В какой версии chart.js это относится? –  Stewart 22.10.2016 в 14:33
  • Похоже, что это больше не применимо в новейшей версии –  btbJosh 30.11.2016 в 18:03
13

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

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

    
ответ дан Sumanth 28.09.2015 в 06:58
источник
  • эта работа лучше для меня :) –  rahmat 10.12.2015 в 09:55
  • awesome, спасибо! –  Signo 22.03.2016 в 15:03
  • Самый короткий и в то же время правильный ответ! –  kiradotee 25.04.2016 в 15:28
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
источник
  • Я не уверен, что это ответ на вопрос, касающийся числовых форматов. –  Stuart Siegler 04.03.2015 в 18:15
  • Я обычно использую его для форматирования денежных количеств, но функция работает равным для чисел форматирования. –  Fran Herrero 05.03.2015 в 08:41
  • Спасибо за помощь. В то время я не понял вашего решения из-за отсутствия знаний в библиотеке chart.js. Однако есть опечатка в tooltipTemplate, где параметр «valueObj» ссылается как «valuesObj». Дайте оценку. –  Ronald 14.04.2015 в 04:38
  • Спасибо, что прикоснулись к ошибке опечатки. Я только что отредактировал его. –  Fran Herrero 14.04.2015 в 10:44
6

Существующие решения не работали для меня в 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
источник
2

Для тех, кто использует Version: 2.5.0, здесь есть усовершенствование для решения @andresgottlieb. При этом вы также можете форматировать суммы в подсказках диаграммы, а не только «тики» в «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);
                }
            }
        }
    }

Вот функция number_format (), которую я использую:

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);
}
    
ответ дан herohat 26.02.2018 в 20:49
источник