2

Utilizando a lib Chartjs(http://www.chartjs.org/) Há alguma forma simples, de fazer um gráfico do tipo "pie", exibir a porcentagem de cada cor, ou pelo menos permitir a inserção do caractere "%" após exibir o número no "tooltip", pois nesse caso, posso calcular as porcentagens antes de renderizar os gráficos.

Segue o código utilizado até o momento:

    var data = [
        {
            value: 83,
            color: "#2DB45C",
            highlight: "#FF5A5E",
            label: "Masculino"
        },
        {
            value: 181,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Feminino"
        }   
    ];

 var pie = new Chart(document.getElementById("pie-chart").getContext("2d")).Pie(data, {});

Ao passar o mouse, na área de cada cor, ele exibe o número passado no parâmetro "value", no array de "configuração". Como já mencionei, posso facilmente transformar esse valor em uma porcentagem, mas a falta do caracter(%) vai tornar mais difícil para o usuário entender quer aquilo é uma porcentagem. Ah alguma solução nesse caso? Ou podem me sugerir alguma outra lib gratuita, que faça +- o mesmo que esta, porem sem essas "limitações".

1 Resposta 1

3

Podes passar à função construtora do gráfico uma mudança à maneira como o conteúdo da ToolTip é gerado. Isto está documentado aqui, e na prática é passar uma string para ser interpretada como JS. Neste caso concatenei simplesmente o valor com a string "%":

tooltipTemplate: '<%= value + "%" %>'

O JavaScript poderia ser assim:

var el = document.getElementById("pie-chart").getContext("2d");
var pie = new Chart(el).Pie(data, {
  tooltipTemplate: '<%= value + "%" %>'
});

jsFiddle: http://jsfiddle.net/m2brxya8/

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 .