1

tudo beleza?

Galera, to precisando de uma força na Lib do ChartJS, estou precisando colocar os valores dentro de um Stacked Groups, algo parecido com isso:

inserir a descrição da imagem aqui

Podem perceber que temos 2 valores, e acima temos o total. Eu dei uma pesquisada encontrei algumas coisas, mas nada que me desse uma luz para fazer algo igual a imagem.

Alguém já passou por isso que pode dar uma ajuda?

Obrigado!!!!

10
  • Não deu pra entender, muito bem, essa imagem é o seu gráfico gerado com erro ? ou você quer um gráfico parecido com isso ? consegue o link da demo do gráfico que você precisa nas docs do Charts.js ?, podes retirar daqui: chartjs.org/samples/latest Commented 29/11/2017 às 12:34
  • Opa, desculpe, talvez expressei errado. Mas sim, quero algo igual a imagem, atualmente o chartJS não possui algo assim, pelo menos na documentação não encontrei a maneira de colocar o numero dentro da barra.
    – Roni
    Commented 29/11/2017 às 12:51
  • O gráfico é esse: chartjs.org/samples/latest/charts/bar/stacked-group.html porém não existe algo na documentação que me fale como colocar a quantidade dentro da barra, hoje o número só aparece quando passa o mouse por cima.
    – Roni
    Commented 29/11/2017 às 12:53
  • Precisa ser mesmo essa biblioteca ? da uma olhada se isso serve, jsfiddle.net/AnthraxisBR/srfemra6/1 , ai ja preparo uma resposta Commented 29/11/2017 às 12:56
  • No charts.js não tem um método pré-definido como 'showvalues' de outras bibliotecas, pra exibir os valores seria necessário uma ação onComplete pra trigerar a exibição do valor, como nessa pergunta: stackoverflow.com/questions/42556835/… Commented 29/11/2017 às 13:00

1 Resposta 1

1

Caro, o mais próximo que cheguei para atender sua necessidade, foi da forma abaixo. Não consegui torna-lo executavel aqui stackoverflow, porque gera erro. Mas você pode acessar em meu codepen.io/mariorodeghiero se precisar.

inserir a descrição da imagem aqui

Código HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>

<body>

    <canvas id="myChart"></canvas> 


</body>

</html>

Código javascript

var ctx = document.getElementById("myChart");

var data = {
    labels: [
        "Coluna 1",
        "Coluna 2",
        "Coluna 3"
    ],
    datasets: [{
                label: 'x',
                backgroundColor: '#005bad',
                stack: 'Stack 0',
                data: [219, 318, 340]
            }, 
               {
                label: 'y',
                backgroundColor: '#005bad',
                stack: 'Stack 0',
                data: [ 30641, 30600, 30710 ]
            },
               {
                label: 'z',
                backgroundColor: '#005bad',
                stack: 'Stack 0',
                data: [ 30860, 30800, 30900 ]
            }]
};

var myBarChart = new Chart(ctx,{
    type: 'bar',
    data: data,
    options: {
      tooltips: false,
      legend: {
            display: true,
                  position: 'bottom',
                  labels: {
                            usePointStyle: true
                        }
        },
      animation:{
            animateScale:true
        },
      scales: {
            xAxes: [{
                ticks: {
                    beginAtZero:true,
                  max:100,
                   callback: function(value, index, values) {
                        return value + ' %';
                    }
                }
            }]
        }
      }
});

 Chart.plugins.register({
            afterDatasetsDraw: function(chart, easing) {
                // To only draw at the end of animation, check for easing === 1
                var ctx = chart.ctx;

                chart.data.datasets.forEach(function (dataset, i) {
                    var meta = chart.getDatasetMeta(i);
                    if (!meta.hidden) {
                        meta.data.forEach(function(element, index) {
                            // Draw the text in black, with the specified font
                            ctx.fillStyle = 'rgb(0, 0, 0)';

                            var fontSize = 20;
                            var fontStyle = 'normal';
                            ctx.font = Chart.helpers.fontString(fontSize, fontStyle);

                            // Just naively convert to string for now
                            var dataString = dataset.data[index].toString();

                            // Make sure alignment settings are correct
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';

                            var padding = -10;
                            var position = element.tooltipPosition();
                            ctx.fillText(dataString, position.x - (fontSize / 2) - 20, position.y - (fontSize / 2) - padding);
                        });
                    }
                });
            }
        });
2
  • Putzz Mario!!!! ficou ótimo, e já ajuda o meu problema, agora é só detalhes!!! obrigadão brother!!!!
    – Roni
    Commented 1/12/2017 às 13:17
  • Que bom que pode te ajudar @Roni, se possível marcar a resposta como útil. Valeu Commented 1/12/2017 às 13:26

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 .