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

Suspenso

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

  1. Visão geral
  2. Exemplo
  3. Carregando
  4. Formato de dados
  5. Opções de configuração
  6. Métodos
  7. Eventos
  8. Política de dados

Visão geral

Um gráfico de barras horizontal que é renderizado no navegador usando SVG ou VML. Exibe dicas ao clicar em pontos. Anima linhas ao clicar em entradas de legenda. Para uma versão vertical do gráfico, consulte Gráfico de colunas.

De: Google

Exemplo

Programe você mesmo 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 da tabela representa um grupo de barras adjacentes.

A primeira coluna na tabela precisa ser uma string e representar o rótulo desse grupo de barras. Qualquer número de colunas pode ser seguida, todas numéricas, cada uma representando as barras com a mesma cor e posição relativa em cada grupo.

O valor de uma determinada linha e coluna controla a altura da barra única representada por essa linha e coluna.

Opções de configuração

Nome Tipo Padrão Descrição
Cor do eixo string ou objeto cor padrão A cor do eixo. Os valores possíveis são os da opção de configuração backgroundColor.
Cor do plano de fundo do eixo string ou objeto cor padrão A borda ao redor do plano de fundo do eixo. Os valores possíveis são os da opção de configuração backgroundColor.
Tamanho da fonte do eixo number automático Tamanho da fonte do texto do eixo do gráfico, em pixels.
backgroundColor string ou objeto cor padrão A cor do plano de fundo da área principal do gráfico. Veja as opções disponíveis:
  • 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. É necessário especificar um elemento de matriz para cada série.

  • Se for is3D=false, será uma matriz de cores HTML. Exemplo: colors:['#00FF00','orange']
  • Se for is3D=true, essa será uma matriz de cores HTML ou objetos deste tipo: {color:face_color, darker:shade_color}, em que color é a cor da face 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 serão da mesma cor, e o efeito 3D será reduzido. Exemplo: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean verdadeiro Se definido como verdadeiro, as dicas serão exibidas quando o usuário clicar em uma barra.
foco da cor string ou objeto cor padrão A borda ao redor dos elementos do gráfico em foco (apontados pelo mouse). Os valores possíveis são os da opção de configuração backgroundColor.
altura number Altura do contêiner Altura do gráfico em pixels.
is3D boolean false Se for definida como verdadeira, exibirá uma mudança tridimensional.
empilhado boolean false Se definido como verdadeiro, os valores das linhas 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.
Cor do plano de fundo da legenda string ou objeto cor padrão A cor do plano de fundo da área da legenda do gráfico. Os valores possíveis são os da opção de configuração backgroundColor.
FontFontSize number automático O tamanho da fonte da legenda, em pixels.
Cor do texto da legenda 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 for verdadeiro, o eixo principal deverá ser dimensionado de maneira logarítmica.
max number automático Especifica a linha mais alta da grade do eixo Y. A linha da grade real será a maior entre os dois valores: o valor máximo da opção ou o valor de dados mais alto, arredondado para a próxima marca da grade mais alta.
min number automático Especifica a linha de grade do menor eixo Y. A linha da grade real será a menor de dois valores: o valor mínimo da opção ou o menor valor de dados, arredondado para a próxima marca da grade inferior.
Eixo reverso boolean verdadeiro Se definida como verdadeira (o padrão), as categorias serão de cima para baixo. Se ela for definida como falsa, as barras serão desenhadas de baixo para cima.
mostrarCategorias boolean verdadeiro Se verdadeiro, mostrará os marcadores de categoria. Se for falso, não fará.
title string sem título Texto a ser exibido acima do gráfico.
título X string sem título Texto a ser exibido abaixo do eixo horizontal.
título Y string sem título Texto a ser exibido pelo eixo vertical.
ColorColor 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.
tamanho da fonte do título number automático O tamanho da fonte do título do gráfico, em pixels.

tooltipFontSize (link em inglês)		 number 11 O tamanho da fonte do texto da dica. Isso pode 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 e nunca vai aumentar ou diminuir de acordo com o tamanho ou o tamanho da fonte do texto. No entanto, tudo que ultrapassar 1/3 da altura do gráfico será cortado.
Dica de largura number 120 A largura da dica, em pixels. A largura da dica é fixa e nunca vai aumentar ou diminuir de acordo com o tamanho ou o tamanho da fonte do texto. No entanto, tudo que ultrapassar a largura do gráfico será cortado.
largura 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. Somente 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 todas as entradas de seleção como uma seleção de coluna ou célula. Não é possível selecionar a coluna de rótulo.

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 passa o mouse fora de uma barra e passa os índices de linha e coluna da célula correspondente. linha, coluna
ready O gráfico está pronto para chamadas de método externo. 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.