Esta página foi traduzida pela API Cloud Translation.

Visualização: gráfico de área (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.

Visão geral

Um gráfico de área que é renderizado no navegador usando SVG ou VML. Exibe dicas ao clicar em pontos. Anima linhas ao clicar em entradas de legenda.

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:["areachart"]});
      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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

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

Carregando

O nome do pacote google.load é "areachart"..

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

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

  var visualization = new google.visualization.AreaChart(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 uma linha separada.

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	Cores padrão	As cores a serem usadas nos elementos do gráfico. Uma matriz de strings. Cada elemento é uma string de cor compatível com HTML, por exemplo, "red" ou "#00cc00".
enableTooltip	boolean	verdadeiro	Se definido como verdadeiro, as dicas serão exibidas quando o usuário clicar em um ponto de dados.
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.
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.
tamanho da linha	number	2	Largura da linha em pixels. Use zero para ocultar todas as linhas e mostrar apenas os pontos.
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.
tamanho do ponto	number	3	Tamanho dos pontos exibidos em pixels. Use zero para ocultar todos os pontos.
Eixo reverso	boolean	false	Se ela for definida como verdadeira, desenhará as categorias da direita para a esquerda. O padrão é desenhar da esquerda para a direita.
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. Mas tudo que estiver acima de 1/3 da altura do gráfico será recortado.
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, qualquer valor maior que a largura do gráfico vai 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 os de colunas e de células. 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 um ponto e passa os índices de linha e coluna da célula correspondente.	linha, coluna
`onmouseout`	Disparado quando o usuário passa o mouse sobre um ponto 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 um ponto ou legenda. Quando um ponto é selecionado, 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.