Visualização: gráfico de dispersão (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 dispersão renderizado no navegador usando SVG ou VML. Exibe dicas ao clicar em pontos.

Um gráfico de dispersão é usado para mapear a correlação entre os conjuntos de números.

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:["scatterchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, titleX: 'Age', titleY: 'Weight', legend: 'none', pointSize: 5});
      }
    </script>
  </head>

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

Carregando

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

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

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

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

Formato de dados

Duas ou mais colunas são obrigatórias e todas precisam ser numéricas. Os valores na primeira coluna são usados para o eixo X. Os valores nas colunas a seguir são usados para o eixo Y. Cada coluna é exibida com uma cor diferente.

Os números mínimo e máximo mostrados no eixo X são os valores X mínimo e máximo na tabela de dados. Para forçar que mais espaço seja mostrado abaixo ou acima desses valores, adicione uma linha com um valor de X abaixo do valor mínimo ou acima do máximo de dados e não especifique um valor Y na linha. É possível adicionar uma linha para os valores mínimo, máximo ou ambos dessa maneira.

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.
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 0 Largura da linha em pixels. Use valores positivos para mostrar uma linha entre todos os pontos da mesma coluna de dados.
logScale boolean false Se for verdadeiro, o eixo Y deverá ser dimensionado logarítmica.
logScaleX boolean false Se for verdadeiro, o eixo X 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.
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 os de colunas e 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 e a primeira coluna numérica (a coluna de valor do eixo x).

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.