Visualização: gráfico de barras (versão antiga)

Descontinuado

Esta visualização foi substituída por uma nova versão. Use essa versão. Para facilitar a migração, consulte a página de notas da versão.

Visão geral
Exemplo
Carregando
Formato de dados
Opções de configuração
Métodos
Eventos
Política de dados

Visão geral

É um gráfico de barras horizontais renderizado no navegador usando SVG ou VML. Mostra dicas ao clicar nos pontos. As linhas são animadas ao clicar nas entradas de legenda. Para uma versão vertical desse gráfico, consulte o Gráfico de colunas.

Autor: Google

Exemplo

Programe por conta própria no Playground de visualização

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["barchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

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

Carregando

O nome do pacote google.load é "barchart"

  google.load("visualization", "1", {packages: ["barchart"]});

O nome da classe da visualização é google.visualization.BarChart

  var visualization = new google.visualization.BarChart(container);

Formato de dados

Cada linha na tabela representa um grupo de barras adjacentes.

A primeira coluna da tabela precisa ser uma string e representa o rótulo desse grupo de barras. Há qualquer quantidade de colunas, todas numéricas, cada uma representando as barras com a mesma cor e posição relativa em cada grupo.

O valor em uma determinada linha e coluna controla a altura da barra única representada por essas linhas e colunas.

Opções de configuração

Nome	Tipo	Padrão	Descrição
axisColor	string ou objeto	cor padrão	A cor do eixo. Os valores possíveis são os da opção de configuração backgroundColor.
axisBackgroundColor	string ou objeto	cor padrão	É o plano de fundo da borda ao redor do eixo. Os valores possíveis são os da opção de configuração backgroundColor.
axisFontSize	number	automático	Tamanho da fonte do texto do eixo do gráfico, em pixels.
backgroundColor	string ou objeto	cor padrão	A cor de plano de fundo da área principal do gráfico. Pode ser uma das seguintes opções: Uma string com cor compatível com HTML, por exemplo, "red" ou "#00cc00". Um objeto com as propriedades `stroke` `fill` e `strokeSize`. `stroke` e `fill` precisam ser uma string com uma cor. strokeSize é um número. Exemplo: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. Para usar apenas o preenchimento, sem um traço, use `stroke:null, strokeSize: 0`.
borderColor	string ou objeto	cor padrão	A borda ao redor dos elementos do gráfico. Os valores possíveis são os da opção de configuração backgroundColor.
cores	Matriz de strings ou objetos	Cores padrão	Uma matriz de cores, em que cada elemento especifica a cor de uma série. Você deve especificar um elemento de matriz para cada série. Se `is3D=false`, será uma matriz de cores HTML. Exemplo: color:['#00FF00','orange'] Se for `is3D=true`, será uma matriz de cores HTML ou objetos desse tipo: `{color:face_color, darker:shade_color}`, em que `color` é a cor do rosto do elemento e `darker` é a cor da tonalidade. No entanto, se você especificar uma cor HTML para um objeto 3D, o rosto e a tonalidade terão a mesma cor, e o efeito 3D será reduzido. Exemplo: `{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}`
enableTooltip	boolean	verdadeiro	Se definida como verdadeira, as dicas serão mostradas quando o usuário clicar em uma barra.
focusBorderColor	string ou objeto	cor padrão	A borda ao redor dos elementos do gráfico que estão em foco (apontados pelo mouse). Os valores possíveis são os da opção de configuração backgroundColor.
height	number	Altura do contêiner	Altura do gráfico em pixels.
is3D	boolean	false	Se definido como verdadeiro, exibe uma mudança tridimensional.
isStacked	boolean	false	Se definido como verdadeiro, os valores de linha serão empilhados (acumulados).
lenda	string	"direita"	Posição e tipo de legenda. Será um dos seguintes valores: “right” - à direita do gráfico. "left" - à esquerda do gráfico. "top" - acima do gráfico. "bottom" - abaixo do gráfico. "none": nenhuma legenda é exibida.
legendBackgroundColor	string ou objeto	cor padrão	A cor de fundo da área da legenda do gráfico. Os valores possíveis são os da opção de configuração backgroundColor.
legendFontSize	number	automático	O tamanho da fonte da legenda, em pixels.
legendTextColor	string ou objeto	cor padrão	A cor do texto da legenda. Os valores possíveis são os da opção de configuração backgroundColor.
logScale	boolean	false	Se verdadeiro, o eixo principal deve ser dimensionado logaritmicamente.
max	number	automático	Especifica a linha de grade mais alta do eixo Y. A linha de grade real será o maior de dois valores: o valor máximo da opção ou o valor de dados mais alto, arredondado para a próxima marca de grade mais alta.
min	number	automático	Especifica a linha de grade do eixo Y mais baixa. A linha de grade real será o menor de dois valores: o valor mínimo da opção ou o menor valor de dados, arredondado para a próxima marca de grade inferior.
reverseAxis	boolean	verdadeiro	Se definida como verdadeira (o padrão), desenhará categorias de cima para baixo. Se definida como falsa, a barra será mostrada de baixo para cima.
showCategories	boolean	verdadeiro	Se verdadeiro, os rótulos das categorias serão exibidos. Se for falso, não será.
título	string	sem título	Texto a ser exibido acima do gráfico.
titleX	string	sem título	Texto a ser exibido abaixo do eixo horizontal.
titleY	string	sem título	Texto a ser exibido pelo eixo vertical.
titleColor	string ou objeto	cor padrão	A cor do título do gráfico. Os valores possíveis são os da opção de configuração backgroundColor.
titleFontSize	number	automático	O tamanho da fonte do título do gráfico, em pixels.
tooltipFontSize	number	11	O tamanho da fonte do texto da dica. Isso poderá ser reduzido se a dica for muito pequena para conter o texto na fonte especificada.
tooltipHeight	number	60	A altura da dica, em pixels. A altura da dica é fixa. Ela nunca vai aumentar ou diminuir para se ajustar ao comprimento ou ao tamanho da fonte do texto. No entanto, qualquer coisa maior que 1/3 da altura do gráfico será cortada.
tooltipWidth	number	120	A largura da dica, em pixels. A largura da dica é fixa. Ela nunca vai aumentar ou diminuir para se ajustar ao comprimento ou ao tamanho da fonte do texto. No entanto, tudo o que for maior que a largura do gráfico será cortado.
width	number	Largura do contêiner	Largura do gráfico em pixels.

Métodos

Método	Tipo de retorno	Descrição
`draw(data, options)`	nenhum	Desenha o gráfico.
`getSelection()`	Matriz de elementos de seleção	Implementação padrão do `getSelection()`. Os elementos selecionados são de coluna e célula. Apenas uma coluna ou célula pode ser selecionada por vez pelo usuário.
`setSelection()`	nenhum	Implementação padrão de `setSelection()`, mas aceita a seleção de apenas um elemento. Trata cada entrada de seleção como uma seleção de coluna ou célula. Não é possível selecionar a coluna de rótulos.

Eventos

Nome	Descrição	Propriedades
`onmouseover`	Disparado quando o usuário passa o mouse sobre uma barra e passa os índices de linha e coluna da célula correspondente.	linha, coluna
`onmouseout`	Disparado quando o usuário afasta o mouse de uma barra e transmite os índices de linha e coluna da célula correspondente.	linha, coluna
`ready`	O gráfico está pronto para chamadas de métodos externos. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método `draw` e chame-o somente depois que o evento for acionado.	Nenhum
`select`	Disparado quando o usuário clica em uma barra ou legenda. Quando uma barra é selecionada, a célula correspondente na tabela de dados é selecionada. Quando uma legenda é selecionada, a coluna correspondente na tabela de dados é selecionada. Para saber o que foi selecionado, chame `getSelection()`.	Nenhum

Política de dados

Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.

Visualização: gráfico de barras (versão antiga) Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.