Esta página foi traduzida pela API Cloud Translation.

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

Um gráfico de área que é renderizado no navegador usando SVG ou VML. Mostra dicas ao clicar nos pontos. As linhas são animadas ao clicar nas entradas de legenda.

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:["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 da categoria. Pode haver qualquer número de colunas depois, e todas precisam ser numéricas. Cada coluna é exibida como uma linha separada.

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	Cores padrão	As cores a serem usadas para os 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 definida como verdadeira, as dicas serão mostradas quando o usuário clicar em um ponto de dados.
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.
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.
lineSize	number	2	Largura da linha em pixels. Use zero para ocultar todas as linhas e mostrar apenas os pontos.
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.
pointSize	number	3	Tamanho dos pontos exibidos em pixels. Use zero para ocultar todos os pontos.
reverseAxis	boolean	false	Se definida como verdadeira, as categorias serão traçadas da direita para a esquerda. O padrão é desenhar da esquerda para a direita.
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, valores maiores que 1/3 da altura do gráfico são cortados.
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 colunas e células. 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 um ponto e transmite os índices de linha e coluna da célula correspondente.	linha, coluna
`onmouseout`	Disparado quando o usuário afasta o mouse de um ponto 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 um ponto ou uma 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.

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