Chart.js formato de número

Me fui a las Chart.js documentación y no encontrar nada en el formato de número
ie) 1,000.02 de formato de número «#,###.00»

También hice algunas pruebas básicas y parece que los gráficos no se aceptan no numéricos, de texto por sus valores

Alguien ha encontrado una manera de obtener los valores de formato para tener separador de miles y el número fijo de lugares decimales? Me gustaría tener los valores del eje y los valores en la tabla con formato.

  • Alguien ha sido capaz de dar formato a los gráficos » números?
  • Que versión de chart.js estamos hablando?
InformationsquelleAutor Ronald | 2014-09-17

6 Kommentare

  1. 22

    Hay ninguna funcionalidad integrada para el formato de número en Javascript. He encontrado la solución más fácil para ser el addCommas función en esta página.

    A continuación, sólo tiene que modificar su tooltipTemplate parámetro de la línea de su Chart.defaults.global a algo como esto:

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

    Charts.js se encargará del resto.

    Aquí está el addCommas función:

    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;
    }
    • Gracias mucho. Esto me permitió resolver mi problema y yo era capaz de formato de la escala, así como con: scaleLabel: «<%=addCommas(valor)%>», a Continuación, ya que he tenido varias series tuve a destino multiTooltipTemplate: «<%=addCommas(valor)%>»
    • Soy nuevo en chartjs, ¿qué es exactamente el Chart.defaults.global ?
    • El gráfico.los valores predeterminados.global le permite configurar todos los gráficos que se crean en lugar de la configuración de una en una.
    • Que versión de chart.js afecta esto?
    • Parece que este ya no es aplicable en la versión más reciente
    • agradable gracias mucho

  2. 16

    Para números de coma formateado yo.e 3,443,440 . Usted puede utilizar toLocaleString() en función de la tooltipTemplate .

    tooltipTemplate: «<%= datasetLabel %> – <%= valor.toLocaleString() %>»

    • El menor y, al mismo tiempo, la respuesta correcta!
  3. 12

    Las soluciones existentes no a trabajar para mí en Chart.js v2.5. La solución que he encontrado:

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

    He utilizado numeral.js, pero usted puede utilizar el addCommas función propuesta por Yacine, o cualquier otra cosa.

  4. 9

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

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

    Aquí es 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) : "");
    }
    • No estoy seguro de que esta es una respuesta a la pregunta, que era acerca de los formatos de número.
    • Yo uso normalmente para el formato de cantidades de dinero, pero el funcionamiento es igual para un formato de números.
    • Gracias por la ayuda. En el momento en que yo no entiendo su solución debido a mi falta de conocimiento de la chart.js biblioteca. Sin embargo, hay una errata en la tooltipTemplate donde el parámetro «valueObj» se hace referencia como «valuesObj». Hasta el voto emitido.
    • Gracias por darme un toque sobre el error de tecleo. Acabo de editarlo.
  5. 8

    Para los que usan la Versión: 2.5.0, aquí es una mejora para @andresgottlieb solución. Con esto, también puede dar formato a las cantidades en las sugerencias de la carta, no sólo la ‘ticks’ 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í es el number_format() función de lo 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);
    }

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea