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

Importante: o uso do componente de gráficos de imagem das Ferramentas de gráfico do Google foi suspenso oficialmente em 20 de abril de 2012. Ela vai continuar funcionando de acordo com nossa política de descontinuação.

Visão geral

Um gráfico de barras que é renderizado como uma imagem usando a API Google Charts.

Exemplo

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagebarchart"]});
      google.charts.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.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Carregando

O nome do pacote google.charts.load é "imagebarchart".

  google.charts.load("current", {packages: [[]"imagebarchart"]});

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

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

Formato de dados

A primeira coluna deve ser uma string e conter o rótulo de categoria. Qualquer número de colunas pode ser seguida, todas precisam ser numéricas. Cada coluna é exibida como um conjunto de barras. Quando a tabela de dados contém mais de uma coluna numérica, os valores em uma linha são exibidos como barras empilhadas.

Opções de configuração

Nome Tipo Padrão Descrição
backgroundColor string '#FFFFFF' (branca) A cor do plano de fundo do gráfico no formato de cores da API Chart.
Cores Matriz<string> Automático Use essa opção para atribuir cores específicas a cada série de dados. As cores são especificadas no formato de cores da API Chart. A cor i é usada na coluna de dados i, envolvendo ao início se houver mais colunas de dados do que cores. Se as variações de uma única cor forem aceitáveis para todas as séries, use a opção color.
enableEvents boolean false Faz com que os gráficos gerem eventos acionados pelo usuário, como clique ou mouse. Compatível apenas com tipos específicos de gráficos. Veja a seção Eventos abaixo.
altura number Altura do contêiner Altura do gráfico em pixels.
empilhado boolean verdadeiro Controla se várias colunas de dados vão ser exibidas como barras empilhadas (em vez de agrupadas).
Vertical boolean false Controla se as barras serão verticais.
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.
max number automático O valor máximo a ser exibido no eixo Y.
min number automático O valor mínimo a ser exibido no eixo Y.
Marcadores de categoria boolean verdadeiro Se ela for definida como falsa, os rótulos das categorias serão removidos.
Rótulos de valor de exibição boolean verdadeiro Se definido como falso, remove os rótulos dos valores.
title string sem título Texto a ser exibido acima do gráfico.
Intervalo de Rótulos de Valor number Automático O intervalo em que os rótulos do eixo de valor são mostrados. Por exemplo, se min for 0, max for 100 e valueLabelsInterval for 20, o gráfico vai mostrar rótulos de eixo em (0, 20, 40, 60, 80 100).
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.

Eventos

Você pode se registrar para ouvir os eventos descritos na página Gráfico genérico de imagens.

Política de dados

Consulte a política de geração de registros da API Chart.