Preciso fazer um gráfico como esse
Mas não encontrei nada que possa me ajudar. Alguém tem alguma solução para isso?
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:
Veja funcionando no JsFidlle
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