javascript - Formato de número de Chart.js

charts formatting

Question

Revisé la documentación de Chart.js y no encontré nada en el formato del número, es decir,) 1,000.02 del formato del número "#, ###. 00"

También hice algunas pruebas básicas y parece que los gráficos no aceptan texto no numérico para sus valores

¿Alguien ha encontrado una manera de obtener valores formateados para tener un separador de miles y un número fijo de lugares decimales? Me gustaría tener los valores de los ejes y los valores en el gráfico formateado.

Answer 1

Las soluciones existentes no funcionaron para mí en Chart.js v2.5. La solución que encontré:

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

numeral.js , pero puedes usar la función addCommas propuesta por Yacine, o cualquier otra cosa.

Answer 2

No hay una funcionalidad incorporada para el formato de número en Javascript. Encontré que la solución más fácil es la función addCommas en esta página .

Luego, solo tiene que modificar la línea de parámetros de su Chart.defaults.global desde su Chart.defaults.global a algo como esto:

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

Charts.js se encargará del resto.

Aquí está la función 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;
}

Answer 3

Para aquellos que usan la Versión: 2.5.0, aquí hay una mejora para la solución @andresgottlieb. Con esto, también puede dar formato a las cantidades en la información sobre herramientas del cuadro, no solo las "marcas" en el "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);
                }
            }
        }
    }

Aquí está la función number_format () que estoy usando:

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

Answer 4

Para que los números tengan formato de coma, es decir, 3,443,440. Puedes usar la función toLocaleString () en la plantilla de sugerencias.

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

Answer 5

Ponga información sobre tooltips en ''opción'' de esta manera:

options: {
  tooltips: {
      callbacks: {
          label: function(tooltipItem, data) {
              return tooltipItem.yLabel.toFixed(2).replace(//d(?=(/d{3})+/.)/g, ''$&,'');
          }
      }
  }
}

Referencia de https://github.com/chartjs/Chart.js/pull/160 .

Answer 6

Puede configurar el valor tooltipTemplate desde su Chart.defaults.global con una función para formatear el valor:

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

Aquí está la función de formato:

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