Visão geral
Os gráficos de barras do Google são renderizados no navegador usando SVG ou VML, o que for apropriado para o navegador do usuário. Como todos os gráficos do Google, os gráficos de barras exibem dicas quando o usuário passa o cursor sobre os dados. Para uma versão vertical desse gráfico, consulte o gráfico de colunas.
Exemplos
Barras de colorir
Vamos fazer um gráfico com as densidades de quatro metais preciosos:
Acima, todas as cores são o azul padrão. Isso ocorre porque todos eles fazem parte da mesma série. Se houvesse uma segunda série, isso seria colorido em vermelho. Podemos personalizar essas cores com a função de estilo:
Há três maneiras diferentes de escolher as cores, e nossa tabela de dados mostra todas elas: valores RGB, nomes de cores em inglês e uma declaração parecida com CSS:
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333'], // RGB value
['Silver', 10.49, 'silver'], // English color name
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
]);
Estilos de barra
O papel de estilo permite controlar vários aspectos da aparência da barra com declarações semelhantes a CSS:
coloropacityfill-colorfill-opacitystroke-colorstroke-opacitystroke-width
Não recomendamos misturar estilos muito livremente em um gráfico. Escolha um estilo e atenha a ele. Mas, para demonstrar todos os atributos de estilo, veja uma amostra:
As duas primeiras barras usam um color específico, o
primeiro com um nome em inglês e o segundo com um valor
RGB. Nenhum opacity foi escolhido, portanto, o padrão 1.0
(totalmente opaco) é usado. É por isso que a segunda barra oculta a
grade por trás dela. No terceiro compasso, um opacity de 0,2
é usado, revelando a linha de grade. Na quarta barra, três atributos
de estilo são usados: stroke-color
e stroke-width para desenhar a borda
e fill-color para especificar a cor do retângulo
dentro. A barra mais à direita também
usa stroke-opacity e fill-opacity para
escolher as opacidades da borda e do preenchimento:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Visitations', { role: 'style' } ],
['2010', 10, 'color: gray'],
['2020', 14, 'color: #76A7FA'],
['2030', 16, 'opacity: 0.2'],
['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
]);
Rotular barras
Os gráficos têm vários tipos de rótulos, como rótulos de marcação, rótulo de legenda e rótulos nas dicas. Nesta seção, veremos como colocar rótulos dentro ou perto das barras em um gráfico de barras.
Vamos supor que você queira anotar cada barra com o símbolo químico apropriado. Podemos fazer isso com o papel annotation:
Na tabela de dados, definimos uma nova coluna com { role:
'annotation' } para armazenar os rótulos das barras:
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
['Copper', 8.94, '#b87333', 'Cu' ],
['Silver', 10.49, 'silver', 'Ag' ],
['Gold', 19.30, 'gold', 'Au' ],
['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
]);
Embora os usuários possam passar o cursor sobre as barras para ver os valores de dados, recomendamos incluí-los nas próprias barras:
Isso é um pouco mais complicado do que deveria ser, porque
criamos um DataView para especificar a anotação para cada
barra.
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>
Se quiséssemos formatar o valor de maneira diferente, poderíamos definir um formatador e uni-lo em uma função como esta:
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
Depois, podemos chamá-lo com calc: getValueAt.bind(undefined, 1).
Se o rótulo for muito grande para caber inteiramente na barra, ele será exibido fora:
Gráficos de barras empilhadas
Um gráfico de barras empilhadas posiciona os valores relacionados entre si. Se houver valores negativos, eles serão empilhados em ordem inversa abaixo da linha de base do eixo do gráfico. Os gráficos de barras empilhadas normalmente são usados quando uma categoria se divide naturalmente em componentes. Por exemplo, considere algumas vendas hipotéticas de livros, divididas por gênero e comparadas ao longo do tempo:
Crie um gráfico de barras empilhadas definindo a opção isStacked como true:
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
};
Os gráficos de barras empilhadas também são compatíveis com o empilhamento de 100%, em que as pilhas dos elementos em cada
valor de domínio são redimensionadas para que totalizem 100%. As opções para isso são isStacked: 'percent', que formata cada valor como uma porcentagem de 100%, e isStacked: 'relative', que formata cada valor como uma fração de 1. Há também uma opção isStacked: 'absolute', que é funcionalmente equivalente a isStacked: true.
No gráfico empilhado 100% à direita, os valores de marcação são baseados na escala relativa de 0 a 1 como frações de 1, mas os valores do eixo são exibidos como porcentagens. Isso ocorre porque
as marcações do eixo de porcentagem são o resultado da aplicação de um formato de "#.##%" aos valores de escala relativos de 0 a 1. Ao usar isStacked: 'percent', especifique qualquer marcação usando a escala relativa de 0 a 1.
var options_stacked = {
isStacked: true,
height: 300,
legend: {position: 'top', maxLines: 3},
hAxis: {minValue: 0}
};
var options_fullStacked = {
isStacked: 'percent',
height: 300,
legend: {position: 'top', maxLines: 3},
hAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
Como criar gráficos de barras do Material Design
Em 2014, anunciamos diretrizes destinadas a oferecer suporte a uma aparência comum nas propriedades e apps (como apps Android) executados em plataformas do Google. Chamamos isso de Material Design. Forneceremos versões de "Material" de todos os nossos gráficos principais. Fique à vontade para usá-los se quiser.
A criação de um gráfico de barras do Material Design é semelhante à criação do que
chamaremos de gráfico "clássico". Carregue a API de visualização do Google
(embora com o pacote 'bar' em vez
do pacote 'corechart'), defina sua tabela de dados e
crie um objeto (mas da classe google.charts.Bar em vez
de google.visualization.BarChart).
Observação: os gráficos do Material Design não funcionam em versões antigas do Internet Explorer. O IE8 e versões anteriores não são compatíveis com SVG, o que é exigido pelos gráficos do Material Design.
Os gráficos de barras do Material Design têm muitas pequenas melhorias em relação aos gráficos de barras clássicos, incluindo uma paleta de cores aprimorada, cantos arredondados, formatação de rótulos mais clara, espaçamento padrão mais estreito entre séries, grades mais suaves e títulos (e a adição de legendas).
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
Os gráficos do Material Design estão na versão Beta. A aparência e a interatividade são finais, mas muitas das opções disponíveis nos gráficos clássicos ainda não estão disponíveis nelas. Veja uma lista de opções que ainda não têm suporte
neste problema.
Além disso, a maneira como as opções são declaradas não está finalizada, portanto, se você estiver usando qualquer uma
das opções clássicas, será necessário convertê-las em opções materiais substituindo esta linha:
chart.draw(data, options);
...por:
chart.draw(data, google.charts.Bar.convertOptions(options));
O uso de google.charts.Bar.convertOptions() permite que você aproveite determinados recursos, como as opções predefinidas de hAxis/vAxis.format.
Gráficos Dual-X
Observação:os eixos Dual-X estão disponíveis apenas para
gráficos do Material Design (ou seja, aqueles com o pacote bar).
Às vezes, você vai querer mostrar duas séries em um gráfico de barras, com dois eixos x independentes: um eixo superior para uma série e outro inferior para outra: