Esta página foi traduzida pela API Cloud Translation.

Visualização: GeoChart

Visão geral
Gráficos geográficos de região
Gráficos geográficos de marcadores
Gráficos geográficos de texto
Como colorir seu gráfico
Carregando
Formato de dados
Opções de configuração
Métodos
Eventos
Política de dados

Visão geral

Um gráfico geográfico é um mapa de um país, um continente ou uma região com áreas identificadas de uma das três maneiras:

O modo de região colore regiões inteiras, como países, províncias ou estados.
O modo de marcadores usa círculos para designar regiões que são dimensionadas de acordo com um valor especificado por você.
O modo de texto rotula as regiões com identificadores (por exemplo, "Rússia" ou "Ásia").

Um gráfico geográfico é renderizado no navegador usando SVG ou VML. Não é possível rolar nem arrastar o gráfico geográfico. Trata-se de um desenho de linhas em vez de um mapa de terreno. Se você quiser algo mais, considere usar uma visualização de mapa.

Gráficos geográficos de região

O estilo regions preenche regiões inteiras (geralmente países) com cores correspondentes aos valores atribuídos por você.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Gráficos geográficos de marcadores

O estilo markers renderiza círculos em locais especificados no gráfico geográfico, com a cor e o tamanho especificados por você.
Passe o cursor sobre os marcadores desordenados ao redor de Roma e uma lupa será aberta para mostrar os marcadores em mais detalhes. A lupa não é compatível com o Internet Explorer versão 8 ou anterior.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
     google.charts.load('current', {
       'packages': ['geochart'],
       // Note: Because markers require geocoding, you'll need a mapsApiKey.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     });
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['City',   'Population', 'Area'],
        ['Rome',      2761477,    1285.31],
        ['Milan',     1324110,    181.76],
        ['Naples',    959574,     117.27],
        ['Turin',     907563,     130.17],
        ['Palermo',   655875,     158.9],
        ['Genoa',     607906,     243.60],
        ['Bologna',   380181,     140.7],
        ['Florence',  371282,     102.41],
        ['Fiumicino', 67370,      213.44],
        ['Anzio',     52192,      43.43],
        ['Ciampino',  38262,      11]
      ]);

      var options = {
        region: 'IT',
        displayMode: 'markers',
        colorAxis: {colors: ['green', 'blue']}
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Exibir marcadores proporcionais

Normalmente, os gráficos geográficos mostram o menor valor dele como um ponto mínimo. Se você quiser exibir valores de marcador proporcionais (por exemplo, porque são porcentagens), use a opção sizeAxis para definir minValue e maxValue explicitamente.

Por exemplo, aqui está um mapa da Europa Ocidental com populações e áreas para três países: Alemanha, França e Polônia. As populações são todas números absolutos (por exemplo, 65 milhões para a França), mas as áreas são todas em porcentagens do todo: o marcador França tem cor violeta porque sua população é média, mas tem o tamanho 50 (de 100 possíveis), porque contém 50% da área combinada.

Neste código, usamos sizeAxis para especificar tamanhos de marcador no intervalo de 0 a 100. Também usamos um colorAxis com valores RGB para mostrar as populações como um intervalo de cores de laranja a azul, um espectro que funciona bem para usuários com deficiências visuais de cor. Por fim, especificamos a Europa Ocidental com um region de 155, de acordo com a seção "Hierarquia e códigos de conteúdo" mais adiante neste documento.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
     google.charts.load('current', {
       'packages': ['geochart'],
       // Note: Because markers require geocoding, you'll need a mapsApiKey.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     });
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country',   'Population', 'Area Percentage'],
        ['France',  65700000, 50],
        ['Germany', 81890000, 27],
        ['Poland',  38540000, 23]
      ]);

      var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },
        region: '155', // Western Europe
        displayMode: 'markers',
        colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Gráficos geográficos de texto

É possível sobrepor rótulos de texto em um gráfico geográfico com displayMode: text.

Dados e opções

  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['South America', 600],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['Australia', 600]
  ]);

  var options = { displayMode: 'text' };

HTML completo

<html>
 <head>
  <script type='text/javascript' src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="regions_div" style="width: 900px; height: 500px;"></div>

  <script type="text/javascript">
  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: Because this chart requires geocoding, you'll need a mapsApiKey.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });
  google.charts.setOnLoadCallback(drawRegionsMap);

   function drawRegionsMap() {
     var data = google.visualization.arrayToDataTable([
       ['Country', 'Popularity'],
       ['South America', 600],
       ['Canada', 500],
       ['France', 600],
       ['Russia', 700],
       ['Australia', 600]
     ]);

     var options = { displayMode: 'text' };

     var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

     chart.draw(data, options);
   }
  </script>
 </head>
 <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
 </body>
</html>

Como colorir seu gráfico

Há várias opções de personalização das cores dos gráficos geográficos:

colorAxis: o espectro de cores a ser usado para as regiões na tabela de dados.
backgroundColor: a cor do plano de fundo do gráfico.
datalessRegionColor: a cor a ser atribuída a regiões sem dados associados.
defaultColor: a cor a ser atribuída às regiões na tabela de dados em que o valor é null ou não especificado.

A opção colorAxis é a mais importante: ela especifica o intervalo de cores para os valores de dados. Na matriz colorAxis, o primeiro elemento é a cor atribuída ao menor valor no conjunto de dados, e o último elemento é a cor dada ao maior valor no conjunto de dados. Se você especificar mais de duas cores, a interpolação vai ocorrer entre elas.

No gráfico a seguir, vamos usar todas as quatro opções. O colorAxis é usado para mostrar a África com as cores da bandeira pan-africana, usando as latitudes dos países: de vermelho ao norte, preto e verde ao sul. A opção backgroundColor é usada para colorir o plano de fundo com azul-claro, datalessRegionColor para colorir os países não africanos como rosa-claro e defaultColor para Madagascar.

google.charts.load('current', {
        'packages':['geochart'],
        // Note: Because this chart requires geocoding, you'll need mapsApiKey.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country',   'Latitude'],
          ['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
          ['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
          ['Canary Islands', 28], ['Cape Verde', 15],
          ['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
          ['Comoros', -12], ['Cote d\'Ivoire', 6],
          ['Democratic Republic of the Congo', -3], ['Djibouti', 12],
          ['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
          ['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
          ['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
          ['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],
          ['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
          ['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
          ['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
          ['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
          ['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
          ['São Tomé and Principe', 0], ['Senegal', 15],
          ['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
          ['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
          ['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
          ['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
          ['Zimbabwe', -18]
        ]);

var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };

var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
        chart.draw(data, options);
      };

Opções

        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };

Página da Web completa

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
        // Note: Because this chart requires geocoding, you'll need mapsApiKey.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country',   'Latitude'],
          ['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
          ['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
          ['Canary Islands', 28], ['Cape Verde', 15],
          ['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
          ['Comoros', -12], ['Cote d\'Ivoire', 6],
          ['Democratic Republic of the Congo', -3], ['Djibouti', 12],
          ['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
          ['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
          ['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
          ['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],
          ['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
          ['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
          ['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
          ['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
          ['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
          ['São Tomé and Principe', 0], ['Senegal', 15],
          ['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
          ['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
          ['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
          ['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
          ['Zimbabwe', -18]
        ]);

        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };

        var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
        chart.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="geochart-colors" style="width: 700px; height: 433px;"></div>
  </body>
</html>

Carregando

O nome do pacote google.charts.load é "geochart". Não copie nossa mapsApiKey, pois isso não funcionará. Desde que seu gráfico não exija geocodificação ou use códigos diferentes do padrão para identificar locais, você não precisará de uma mapsApiKey. Para mais detalhes, consulte Carregar configurações.

  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: if your chart requires geocoding or uses nonstandard codes, you'll
    // need to get a mapsApiKey for your project. The one below won't work.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });

O nome da classe de visualização do gráfico geográfico é google.visualization.GeoChart.

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

Formato de dados

O formato da DataTable varia de acordo com o modo de exibição usado: regions, markers ou text.

Formato do modo de regiões

O local é inserido em uma coluna mais uma coluna opcional, conforme descrito aqui:

Region location [string, obrigatório]: uma região a ser destacada. Todos os formatos a seguir são aceitos. É possível usar formatos diferentes em linhas diferentes:
- Um nome de país como uma string (por exemplo, "Inglaterra"), um código ISO-3166-1 alfa-2 em letra maiúscula ou o equivalente em inglês (por exemplo, "GB" ou "Reino Unido").
- Um nome de código da região ISO-3166-2 em letra maiúscula ou o equivalente em texto em inglês (por exemplo, "US-NJ" ou "New Jersey").
- Um código de área metropolitana. São códigos de área metropolitana de três dígitos usados para designar várias regiões. Somente códigos dos EUA são aceitos. Observe que eles não são a mesma coisa que os códigos de área telefônicos.
- Qualquer valor compatível com a propriedade region.
Cor da região [número, opcional]: uma coluna numérica opcional usada para atribuir uma cor a essa região, com base na escala especificada na propriedade colorAxis.colors. Se essa coluna não estiver presente, todas as regiões terão a mesma cor. Se a coluna estiver presente, valores nulos não serão permitidos. Os valores são dimensionados em relação aos valores sizeAxis.minValue/sizeAxis.maxValue ou aos valores especificados na propriedade colorAxis.values, se fornecidos.

Formato do modo de marcadores

O número de colunas varia de acordo com o formato do marcador usado e de outras colunas opcionais.

Marker location [obrigatório]
A primeira coluna é um endereço de string específico, por exemplo, "Av. Paulista, 1600".
OU
As duas primeiras colunas são numéricas, em que a primeira é a latitude e a segunda é a longitude.

Observação:embora recomendemos que os códigos ISO 3166 sejam usados no modo "regiões", o modo "marcadores" funciona melhor com nomes mais longos para as regiões, como Alemanha, Panamá etc. Isso ocorre porque os gráficos geográficos usam o Google Maps para geocodificar os locais, convertendo a localização de uma string em latitude e longitude. Isso pode fazer com que locais ambíguos não sejam geocodificados como esperado. Por exemplo, "DE" para Alemanha ou Delaware ou "PA" para Panamá ou Pensilvânia.
Cor do marcador [Número, opcional] A próxima coluna é uma coluna numérica opcional usada para atribuir uma cor a este marcador, com base na escala especificada na propriedade colorAxis.colors. Se essa coluna não estiver presente, todos os marcadores terão a mesma cor. Se a coluna estiver presente, valores nulos não serão permitidos. Os valores são dimensionados em relação uns aos outros ou absolutamente de acordo com os valores especificados na propriedade colorAxis.values.
Tamanho do marcador [número, opcional] Uma coluna numérica opcional usada para atribuir o tamanho do marcador em relação aos outros tamanhos. Se essa coluna não estiver presente, o valor da coluna anterior será usado (ou o tamanho padrão, se nenhuma coluna de cor também for fornecida). Se a coluna estiver presente, valores nulos não serão permitidos.

Formato do modo de texto

O rótulo é inserido na primeira coluna, mais uma coluna opcional:

Rótulo de texto [String, obrigatório]: um endereço de string específico (por exemplo, "Av. Paulista, 1600").
Tamanho do texto [número, opcional] A segunda coluna é uma coluna numérica opcional usada para atribuir o tamanho do rótulo. Se essa coluna não estiver presente, todos os rótulos serão do mesmo tamanho.

Opções de configuração

Nome
backgroundColor	A cor de plano de fundo da área principal do gráfico. Pode ser uma string de cor HTML simples, como `'red'` ou `'#00cc00'`, ou um objeto com as propriedades a seguir. Tipo:string ou objeto Padrão:branco
backgroundColor.fill	A cor de preenchimento do gráfico, como uma string de cor HTML. Tipo: string Padrão:branco
backgroundColor.stroke	A cor da borda do gráfico, como uma string de cor HTML. Tipo: string Padrão: "#666"
backgroundColor.strokeWidth	A largura da borda, em pixels. Tipo: número Padrão:0
colorAxis	Um objeto que especifica um mapeamento entre os valores da coluna de cores e as cores ou uma escala de gradiente. Para especificar as propriedades desse objeto, é possível usar a notação literal de objeto, como mostrado aqui: {minValue: 0, colors: ['#FF0000', '#00FF00']} Tipo: objeto Padrão:nulo
colorAxis.minValue	Se presente, especifica um valor mínimo para os dados de cores do gráfico. Os valores de dados de cores desse valor e de valores inferiores serão renderizados como a primeira cor no intervalo `colorAxis.colors`. Tipo: número Padrão:valor mínimo da coluna de cor nos dados do gráfico
colorAxis.maxValue	Se presente, especifica um valor máximo para os dados de cores do gráfico. Os valores de dados de cores desse valor e de valores mais altos serão renderizados como a última cor no intervalo `colorAxis.colors`. Tipo: número Padrão:valor máximo da coluna de cor nos dados do gráfico
colorAxis.values	Se presente, controla como os valores são associados às cores. Cada valor é associado à cor correspondente na matriz `colorAxis.colors`. Esses valores se aplicam aos dados de cores do gráfico. A coloração é feita de acordo com um gradiente dos valores especificados aqui. Não especificar um valor para essa opção equivale a especificar [minValue, maxValue]. Tipo:matriz de números Padrão:nulo
colorAxis.colors	Cores a serem atribuídas a valores na visualização. Uma matriz de strings, em que cada elemento é uma string de cor HTML, por exemplo: `colorAxis: {colors:['red','#004411']}`. É preciso ter pelo menos dois valores. O gradiente incluirá todos os seus valores, além dos valores intermediários calculados, sendo que a primeira cor é o menor valor e a última, o mais alto. Tipo:matriz de strings de cores Padrão:nulo
datalessRegionColor	Cor para atribuir a regiões sem dados associados. Tipo: string Padrão: '#F5F5F5'
defaultColor	A cor a ser usada para pontos de dados em um gráfico geográfico quando a localização (por exemplo, `'US'` ) está presente, mas o valor é `null` ou não especificado. Isso é diferente de `datalessRegionColor`, que é a cor usada quando os dados estão ausentes. Tipo: string Padrão: '#267114'
displayMode	Que tipo de gráfico geográfico é. O formato DataTable deve corresponder ao valor especificado. Os seguintes valores são aceitos: "auto" - escolha com base no formato da tabela de dados. "regions" - colore as regiões no gráfico geográfico. 'markers' - coloque marcadores nas regiões. "text" - rotular as regiões com texto da tabela de dados. Tipo: string Padrão: "auto"
domínio	Mostra o gráfico geográfico como se ele estivesse sendo veiculado desta região. Por exemplo, ao definir `domain` como `'IN'`, a Caxemira será exibida como pertencente à Índia e não como um território disputado. Tipo: string Padrão:nulo
enableRegionInteractivity	Se verdadeiro, ative a interatividade da região, incluindo a explicação do foco e da dica de ferramenta ao passar o mouse e a seleção e o acionamento da região de eventos `regionClick` e `select` com o clique do mouse. O padrão é verdadeiro no modo região e falso no modo marcador. Tipo: booleano Padrão:automático
forceIFrame	Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames. Tipo: booleano Padrão:false
geochartVersion	A versão dos dados de borda do gráfico geográfico. As versões `10` e `11` estão disponíveis. Tipo: número Padrão:10
height	Altura da visualização, em pixels. A altura padrão é de 347 pixels, a menos que a opção `width` seja especificada e `keepAspectRatio` seja definido como verdadeiro. Nesse caso, a altura é calculada de acordo. Tipo: número Padrão:automático
keepAspectRatio	Se verdadeiro, o gráfico geográfico será desenhado no maior tamanho que puder caber dentro da área do gráfico com sua proporção natural. Se apenas uma das opções `width` e `height` for especificada, a outra será calculada de acordo com a proporção. Se for falso, o gráfico geográfico será estendido para o tamanho exato dele, conforme especificado pelas opções `width` e `height`. Tipo: booleano Padrão:true
lenda	Um objeto com membros para configurar vários aspectos da legenda, ou "nenhum" se nenhuma legenda aparecer. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {textStyle: {color: 'blue', fontSize: 16}} Tipo: objeto / 'none' Padrão:nulo
legend.numberFormat	Uma string de formato para rótulos numéricos. Esse é um subconjunto do conjunto de padrões de ICU . Por exemplo, `{numberFormat:'.##'}` exibirá os valores "10,66", "10,6" e "10,0" para os valores 10,666, 10,6 e 10. Tipo: string Padrão:automático
legend.textStyle	Um objeto que especifica o estilo do texto da legenda. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } O `color` pode ser qualquer string de cor HTML, como `'red'` ou `'#00cc00'`. Consulte também `fontName` e `fontSize`. Tipo: objeto Padrão:`{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
região	A área a ser exibida no gráfico geográfico. As áreas ao redor também serão exibidas. Pode ser um dos seguintes: "world" - Um gráfico geográfico do mundo inteiro. Um continente ou subcontinente, especificado pelo código de três dígitos, por exemplo, "011" para a África Ocidental. Um país, especificado pelo código ISO 3166-1 alfa-2, por exemplo, "AU" para Austrália. Um estado nos Estados Unidos, especificado pelo código ISO 3166-2:US, por exemplo, "US-AL" para Alabama. A opção `resolution` precisa ser definida como "províncias" ou "áreas metropolitanas". Tipo: string Padrão: "world"
magnifyingGlass	Um objeto com membros para configurar vários aspectos da lupa. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {enable: true, zoomFactor: 7.5} Tipo: Objeto Padrão:`{enable: true, zoomFactor: 5.0}`
magnifyingGlass.enable	Se definida como verdadeira, quando o usuário permanecer sobre um marcador desordenado, uma lupa será aberta. Observação: este recurso não é compatível com navegadores incompatíveis com o SVG, ou seja, o Internet Explorer versão 8 ou anterior. Tipo: booleano Padrão:true
magnifyingGlass.zoomFactor	O fator de zoom da lupa. Pode ser qualquer número maior que 0. Tipo: número Padrão:5,0
markerOpacity	É a opacidade dos marcadores, em que 0.0 é totalmente transparente e 1.0 é totalmente opaco. Tipo: número, 0,0–1,0 Padrão:1,0
regioncoderVersion	A versão dos dados do codificador regional. As versões `0` e `1` estão disponíveis. Tipo: número Padrão:0
resolution	A resolução das bordas do gráfico de mapa. Escolha um dos seguintes valores: "countries" - compatível com todas as regiões, exceto estados dos EUA. "regions" (províncias): compatível apenas com regiões de países e estados dos EUA. Não está disponível em todos os países. Teste cada um deles para conferir se há suporte para essa opção. "metros": compatível apenas com a região dos EUA e com as regiões estaduais dos EUA. Tipo: string Padrão: "countries"
sizeAxis	Um objeto com membros para configurar como os valores são associados ao tamanho do balão. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {minValue: 0, maxSize: 20} Tipo: objeto Padrão:nulo
sizeAxis.maxSize	É o raio máximo do maior balão possível, em pixels. Tipo: número Padrão:12
sizeAxis.maxValue	O valor do tamanho (conforme aparece nos dados do gráfico) a ser mapeado para `sizeAxis.maxSize`. Valores maiores serão cortados para esse valor. Tipo: número Padrão:valor máximo da coluna de tamanho nos dados do gráfico
sizeAxis.minSize	Raio mínimo do menor balão possível, em pixels. Tipo: número Padrão:3
sizeAxis.minValue	O valor do tamanho (conforme aparece nos dados do gráfico) a ser mapeado para `sizeAxis.minSize`. Valores menores serão cortados para esse valor. Tipo: número Padrão:valor mínimo da coluna de tamanho nos dados do gráfico
dica	Um objeto com membros para configurar vários elementos de dica. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {textStyle: {color: '#FF0000'}, showColorCode: true} Tipo: objeto Padrão:nulo
tooltip.textStyle	Um objeto que especifica o estilo do texto da dica. O objeto tem este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } O `color` pode ser qualquer string de cor HTML, como `'red'` ou `'#00cc00'`. Consulte também `fontName` e `fontSize`. Tipo: objeto Padrão:`{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
tooltip.trigger	A interação do usuário que faz com que a dica seja exibida: "focus": a dica é mostrada quando o usuário passa o cursor sobre o elemento. "nenhum" - a dica de ferramenta não será exibida. "selection": a dica de ferramenta será mostrada quando o usuário selecionar o elemento. Tipo: string Padrão: "focus"
width	Largura da visualização, em pixels. A largura padrão é de 556 pixels, a menos que a opção `height` seja especificada e `keepAspectRatio` seja definido como verdadeiro. Nesse caso, a largura é calculada corretamente. Tipo: número Padrão:automático

Hierarquia e códigos do continente

É possível mostrar geográficos de continentes/subcontinentes definindo a opção region como um dos códigos de três dígitos a seguir. Os códigos e a hierarquia são baseados, com algumas exceções, nos desenvolvidos e mantidos pela Divisão de Estatística das Nações Unidas .

Continente	Subcontinente	Países
`002` - África	`015`: Norte da África	DZ, EG, EH, LY, MA, SD, SS, TN
	`011`: África Ocidental	BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, MR, MR2,, MR2,SH SL SN
	`017` - África Central	AO, CD, ZR, CF, CG, CM, GA, GQ, ST e TD
	`014` – África Oriental	BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, MZ, RE, RE, ,, RE,, RE,RW SC SO TZ UG
	`018`: sul da África	BW, LS, NA, SZ, ZA
`150`: Europa	`154`: Norte da Europa	GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, IS, IS, ,,{25 LV
	`155`: Europa Ocidental	AT, BE, CH, DE, DD, FR, FX, LI, LU, MC e NL
	`151`: Europa Oriental	BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK e UA
	`039`: sul da Europa	AD, AL, BA, ES, GI, GR, HR, IT, ME, MK, MK, MT
`019`: Américas	`021`: América do Norte	BM, Canadá, GL, PM, EUA
	`029` - Caribe	AG3, AI, AN, AW, BB, BL, BS, CU, DM, DO, GD, GD, GD GP LC MS
	`013` – América Central	BZ, CR, GT, HN, MX, NI, PA e SV
	`005` - América do Sul	AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY, PY, {23, PY,SR VE
`142` - Ásia	`143` – Ásia Central	TM, TJ, KG, KZ, UZ
	`030` – Ásia Oriental	CN, HK, JP, KP, KR, MN, MO e TW
	`034`: sul da Ásia	AF, BD, BT, IN, IR, LK, MV, NP e PK
	`035` – Sudeste Asiático	BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL, TL, VN
	`145` - Ásia Ocidental	AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW, LB, LB, 2{/3,{2PS
`009` - Oceania	`053`: Austrália e Nova Zelândia	AU, NF, NZ
	`054` - Melanésia	FJ, NC, PG, SB, VU
	`057` - Micronésia	FM, GU, KI, MH, MP, NR e PW
	`061` - Polinésia	AS, CK, NU, PF, PN, TK, TO, TV, WF, WS

Métodos

Método
`clearChart()`	Limpa o gráfico e libera todos os recursos alocados. Return Type: nenhum
`draw(data, options)`	Desenha o gráfico. O gráfico aceita outras chamadas de método somente depois que o evento `ready` é disparado. `Extended description`. Return Type: nenhum
`getImageURI()`	Retorna o gráfico serializado como um URI de imagem. Chame essa função depois que o gráfico for desenhado. Consulte Como imprimir gráficos PNG. Tipo de retorno: string
`getSelection()`	Retorna uma matriz das entidades de gráfico selecionadas. As entidades selecionáveis são regiões com um valor atribuído. Neste gráfico, apenas uma entidade pode ser selecionada por vez. `Extended description` . Tipo de retorno:matriz de elementos de seleção
`setSelection()`	Seleciona as entidades de gráfico especificadas. Cancela qualquer seleção anterior. As entidades selecionáveis são regiões com um valor atribuído. Neste gráfico, apenas uma entidade pode ser selecionada por vez. `Extended description` . Return Type: nenhum

Eventos

Nome
`error`	Disparado quando ocorre um erro ao tentar renderizar o gráfico. Properties:ID, message
`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 disparado. Properties:nenhuma
`regionClick`	Chamado quando uma região é clicada. Isso não será gerado para o país específico atribuído na opção "região" (se um país específico estiver listado). Propriedades:um objeto com uma única propriedade, `region`, que é uma string no formato ISO-3166 que descreve a região clicada.
`select`	Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame `getSelection()`. Properties:nenhuma

Política de dados

Os locais são geocodificados pelo Google Maps. Dados que não exigem geocodificação não são enviados a nenhum servidor. Consulte os Termos de Serviço do Google Maps para mais informações sobre a política de dados deles.