0

Utilizo a seguinte biblioteca para gerar os gráficos:

http://www.chartjs.org

Possuo a seguinte função para formatar dinheiro com ponto e vírgula (retirado de uma resposta aqui do SO) que retorna o valor como tipo String:

Number.prototype.formatMoney = function(c, d, t){
    var n = this, 
        c = isNaN(c = Math.abs(c)) ? 2 : c, 
        d = d == undefined ? "." : d, 
        t = t == undefined ? "," : t, 
        s = n < 0 ? "-" : "", 
        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
        j = (j = i.length) > 3 ? j % 3 : 0;
       return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};

E possuo a seguinte código JavaScript para preencher o gráfico:

$(document).ready(
        function() {
            var dados = [ ];

            var valores_ajax = $.ajax({
                method: 'GET',
                url: '<c:url value="/link1/link2/link3" />',
                async: false,
                success: function(e){
                    var array_length = e.length;
                    for (var i=0; i < array_length; i++){
                        dados.push(formatOnlyNumber(e[i]));
                    }
                },
                error: function(e){
                    alert(e);
                }
            });

            var data = {
                labels : [ 'labels_vao_aqui1', 'labels_vao_aqui2' ],
                datasets : [ {
                    fillColor : "rgb(153, 237, 139)",
                    strokeColor : "rgb(74, 186, 88)",
                    pointColor : "rgb(74, 186, 88)",
                    pointStrokeColor : "#fff",
                    data : dados
                } ]
            }

            var options = {
                animation : true,
                responsive : true,
                margin : '2px',
                backgroundColor : '#FFFFFF'
            };

            var c = $('#idDaDiv');
            var ct = c.get(0).getContext('2d');
            var ctx = document.getElementById("nomeDaDiv")
                    .getContext("2d");

            new Chart(ctx).Bar(data, options);
        }); 

Se eu formatar diretamente o valor dentro de dados.push, irá preencher corretamente o Array, porém serão preenchidos os elementos como tipo String e não como tipo numérico e assim o gráfico irá se perder ao passar o atributo data na construção do Chart na linha: new Chart(ctx).Bar(data, options);.

Então, gostaria de saber se não tem mais algum atributo como data ou label que possa passar no gráfico que monte corretamente as barras do gráfico com seus valores porém que ao passar o mouse sobre cima apareça os valores formatados ou outra solução que recomendariam para isso.

Por enquanto mostra assim:

10000.00

Invés de:

10.000,00

2 Respostas 2

0

Foi dada a seguinte solução porém o post foi removido, estou postando de novo já que me ajudou, era a solução e agradeço:

Obs: O autor da resposta se quiser publicar de novo aqui apago meu post para dar como melhor resposta o seu, quando fui dar um +1 e melhor resposta o mesmo já estava removido.

Number.prototype.formatMoney = function (c, d, t) {
    var n = this,
        c = isNaN(c = Math.abs(c)) ? 2 : c,
        d = d == undefined ? "." : d,
        t = t == undefined ? "," : t,
        s = n < 0 ? "-" : "",
        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
        j = (j = i.length) > 3 ? j % 3 : 0;
    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};

 var options = {
    animation: true,
    responsive: true,   
    tooltipTemplate:
        function (valuesObject) { return "Dia " + valuesObject.label + ": R$ " + valuesObject.value.formatMoney(2, ',', '.'); },
    multiTooltipTemplate:
        function (valuesObject) { return valuesObject.datasetLabel + ": R$ " + valuesObject.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); },
    scaleLabel:
        function (valuesObject) { return "R$ " + valuesObject.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }
};



new Chart(indicadoresMes).Line(result, options);
0

Só para adicionar mais uma resposta, eu resolveria assim.

source: Calcular valores em real R$ https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

let valor = 10000.00,
    valor_formatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
    
console.info(valor_formatado);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .