1

Estou utilizando o Google Chart para desenvolver alguns gráficos. Tenho o seguinte gráfico funcionando:

<script src="https://www.google.com/jsapi?autoload={%27modules%27:[{%27name%27:%27visualization%27,%27version%27:%271.1%27,%27packages%27:[%27bar%27]}]}.js"></script>

<div id="chart_div"></div>

<script>

  google.setOnLoadCallback(drawChart);
    function drawChart() {
             var tdata = google.visualization.arrayToDataTable([
                   ['Estados', 'Concluídos', 'Total'],
                   ['MS', 1, 262],
                   ['RJ', 70, 205],
                   ['SP', 57, 176],
                   ['MG', 0, 82]
                ]);
                var options = {
                    chart: {
                        title: 'Gráfico Clientes',
                        subtitle: 'Total Clientes',
                    },
                    bars: 'horizontal', // Required for Material Bar Charts.
                    hAxis: { format: 'decimal' },
                    height: 400,
                    colors: ['#1b9e77', '#d95f02'],
                    isStacked: true
                };

                var chart = new google.charts.Bar(document.getElementById('chart_div'));

                chart.draw(tdata, google.charts.Bar.convertOptions(options));
        };
</script>

O que necessito é adicionar o valor total na frente de cada barra, ficando como a imagem abaixo: inserir a descrição da imagem aqui

Tentei utilizar {type:'number', role:'annotation'} para adicionar o valor no final, mas não me retorna nenhuma erro e/ou informação.

<script src="https://www.google.com/jsapi?autoload={%27modules%27:[{%27name%27:%27visualization%27,%27version%27:%271.1%27,%27packages%27:[%27bar%27]}]}.js"></script>

<div id="chart_div"></div>

<script>

  google.setOnLoadCallback(drawChart);
    function drawChart() {
             var tdata = google.visualization.arrayToDataTable([
                   ['Estados', 'Concluídos', 'Total', {type:'number', role:'annotation'}],
                   ['MS', 1, 262, 263],
                   ['RJ', 70, 205, 205],
                   ['SP', 57, 176, 233],
                   ['MG', 0, 82, 82]
                ]);
                var options = {
                    chart: {
                        title: 'Gráfico Clientes',
                        subtitle: 'Total Clientes',
                    },
                    bars: 'horizontal', // Required for Material Bar Charts.
                    hAxis: { format: 'decimal' },
                    height: 400,
                    colors: ['#1b9e77', '#d95f02'],
                    isStacked: true
                };

                var chart = new google.charts.Bar(document.getElementById('chart_div'));

                chart.draw(tdata, google.charts.Bar.convertOptions(options));
        };
</script>

Com outros tipos de gráficos funciona formalmente, como pode ser visto neste exemplo.

1 Resposta 1

1

Nas options, dentro de annotations, do seu gráfico acrescente alwaysOutside: true.

var options = {
    chart: {
        title: 'Gráfico Clientes',
        subtitle: 'Total Clientes',
    },
    bars: 'horizontal', // Required for Material Bar Charts.
    hAxis: { format: 'decimal' },
    height: 400,
    colors: ['#1b9e77', '#d95f02'],
    isStacked: true,
    annotations: {
        textStyle: {
            color: 'black',
            fontSize: 11,
        },
        alwaysOutside: true
    }
};

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 .