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

Importante: a parte de gráficos de imagem das Ferramentas de gráficos do Google foi oficialmente suspensa em 20 de abril de 2012. Ele continuará funcionando de acordo com nossa política de descontinuaçã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 área que é renderizado como uma imagem usando a Google Charts API.

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:["imageareachart"]});
      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.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Carregando

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

  google.charts.load('current', {packages: ['imageareachart']});

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

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

Formato de dados

Cada coluna representa uma linha no gráfico. Cada entrada é o valor do eixo Y no mesmo ponto do eixo X, e a visualização os conecta com uma linha reta e, em seguida, preenche a área abaixo da linha.

Os dados são processados por coluna, começando na coluna zero e aumentando. Escreva primeiro as linhas mais altas e depois as linhas inferiores. Se você pintar uma linha inferior primeiro, a linha mais alta pintará por cima e ocultará as linhas inferiores. Portanto, tente fazer com que a coluna 1 tenha mais pontos do que a coluna 2, a coluna 2 tenha mais pontos que a coluna 3 e assim por diante. Se você tiver um ou dois pontos mais alto em uma coluna da direita do que em uma coluna da esquerda, isso poderá ocultar parcialmente a linha inferior, mas ainda assim deverá estar visível.

Todos os dados precisam ser do tipo numérico, exceto o primeiro, que pode ser numérico ou string. Se a primeira coluna for do tipo string, as primeiras entradas da coluna serão mostradas como rótulos no X. Se a primeira coluna for um número, nenhum rótulo do eixo X será mostrado. Todas as colunas (exceto a primeira) precisam ser números. Não há limite para o número de colunas.

Opções de configuração

Nome Tipo Padrão Descrição
backgroundColor string '#FFFFFF' (branco) A cor do plano de fundo do gráfico no formato de cores da API de gráficos.
cores Matriz<string> Automático Use para atribuir cores específicas a cada série de dados. As cores são especificadas no formato de cores da API de gráficos. A cor i é usada para a coluna de dados i, envolvendo o início se houver mais colunas de dados do que cores. Se 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 lancem eventos acionados pelo usuário, como clicar ou passar o mouse. Compatível apenas com tipos de gráficos específicos. Consulte Eventos abaixo.
height number Altura do contêiner Altura do gráfico em pixels.
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.
showCategoryLabels boolean verdadeiro Se definido como falso, remove os rótulos das categorias (os rótulos do eixo X).
showValueLabels boolean verdadeiro Se definido como falso, remove os rótulos dos valores (os rótulos do eixo Y).
título string sem título Texto a ser exibido acima do gráfico.
valueLabelsInterval number Automático O intervalo em que os rótulos dos eixos de valor são mostrados. Por exemplo, se min for 0, max for 100 e valueLabelsInterval for 20, o gráfico mostrará rótulos de eixo em (0, 20, 40, 60, 80 100).
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.

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 de gráficos.