2

Preciso fazer um gráfico como esse inserir a descrição da imagem aqui

Mas não encontrei nada que possa me ajudar. Alguém tem alguma solução para isso?

1 Resposta 1

1

Você pode usar o gráfico de pilhas.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

Imagem do gráfico:

inserir a descrição da imagem aqui

Veja funcionando no JsFidlle

Documentação do Google Charts.

2
  • 1
    Acho que vai servir, muito obrigado. Como eu posso fazer para os cantos ficarem arredondados? Commented 24/10/2016 às 16:33
  • @carlosgiovanicasilo, pra deixar arredondada eu não sei se tem jeito. O que você pode fazer é usar o bar: { groupWidth: '75%' }, com um valor menor, por exemplo bar: { groupWidth: '25%' }, isso vai diminuir o tamanho da barra Commented 24/10/2016 às 18:01

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 .