Visão geral
Um geográfico é um mapa de um país, um continente ou uma região com áreas identificadas de uma destas três maneiras:
- O modo region colore regiões inteiras, como países, províncias ou estados.
- O modo Markers usa círculos para designar regiões que são dimensionadas de acordo com um valor especificado por você.
- O modo text rotula as regiões com identificadores (por exemplo, "Rússia" ou "Ásia").
Um gráfico geográfico é renderizado no navegador usando SVG ou VML. O gráfico geográfico não é rolável ou pode ser arrastado. É um desenho de linha em vez de um mapa de terreno. Se você quiser qualquer coisa, considere uma visualização de mapa.
Gráficos geográficos de região
O estilo regions preenche regiões inteiras (normalmente
países) com cores correspondentes aos valores que você
atribuiu.
<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>
Geográficos de marcadores
O estilo markers renderiza círculos em locais especificados no gráfico geográfico, com a cor e o tamanho que você especificar.
Passe o cursor sobre os marcadores desorganizados em torno 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>
Como exibir marcadores proporcionais
Normalmente, os gráficos de marcadores exibem o menor valor de marcador como um ponto mínimo. Se você quiser exibir valores de marcadores proporcionais (por exemplo, porque eles são porcentagens), use a opção sizeAxis para definir minValue e maxValue explicitamente.
Por exemplo, veja um mapa da Europa Ocidental com populações e áreas de três países: França, Alemanha e Polônia. As populações são todos números absolutos (por exemplo, 65 milhões na França), mas as áreas são todas porcentagens: o marcador francês é violeta porque a população está intermediária, mas está dimensionado para 50 (de 100 possíveis) porque contém 50% da área combinada.
Nesse código, usamos sizeAxis para especificar tamanhos de marcador no intervalo de 0 a 100. Também usamos o colorAxis com valores RGB para mostrar as populações como uma variedade de cores, de laranja a azul, um espectro que funciona bem para usuários com deficiências de visão de cores. 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 de texto
É possível sobrepor marcadores de texto em um gráfico geográfico com displayMode:
text.
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['South America', 600],
['Canada', 500],
['France', 600],
['Russia', 700],
['Australia', 600]
]);
var options = { displayMode: 'text' };
<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>
Colorir o gráfico
Há várias opções para personalizar as cores dos 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 às regiões sem dados associados.defaultColor: a cor a ser atribuída às regiões na tabela de dados em que o valor énullou não especificado.
A opção colorAxis é a importante: ela especifica o intervalo de cores para seus valores de dados. Na matriz colorAxis, o primeiro elemento é a cor atribuída ao menor valor no conjunto de dados, e o último é a cor atribuída ao maior valor no conjunto. Se você especificar mais
de duas cores, a interpolação vai ocorrer entre elas.
No gráfico a seguir, usaremos as quatro opções. O colorAxis é usado para exibir a África com as cores da bandeira pan-africana, usando as latitudes dos países: do vermelho no norte até o preto e o verde no sul. A opção backgroundColor é usada para colorir o plano de fundo de azul-claro, datalessRegionColor para colorir os países não africanos como rosa-claro e defaultColor para Madagascar.
var options = {
region: '002', // Africa
colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: '#f5f5f5',
};
<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. Isso não funciona. Se o gráfico não exige geocodificação ou usa códigos diferentes do padrão para identificar locais, uma mapsApiKey não é necessária. Para ver mais detalhes, consulte
Configurações de carregamento.
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 é google.visualization.GeoChart.
var visualization = new google.visualization.GeoChart(container);
Formato de dados
O formato da tabela de dados 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, além de uma coluna opcional, conforme descrito aqui:
-
Local da região [String, obrigatório] - Uma região a ser destacada.
Todos os formatos a seguir são aceitos. Você pode usar formatos diferentes em linhas diferentes:
- Um nome de país, como uma string (por exemplo, "Inglaterra") ou um código ISO-3166-1 alfa-2 maiúsculo 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 inglês (por exemplo, "US-NJ" ou "New Jersey").
- Um código de área metropolitana. Esses são os códigos de área metropolitana de três dígitos usados para designar várias regiões. Só há compatibilidade com códigos dos EUA. Eles não são iguais aos códigos de área telefônicos.
- Qualquer valor aceito pela 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, os valores nulos não serão permitidos. Os valores são dimensionados em relação aos valoressizeAxis.minValue/sizeAxis.maxValueou aos valores especificados na propriedadecolorAxis.values, se fornecidos.
Formato do modo "Marcadores"
O número de colunas varia de acordo com o formato do marcador usado, bem como outras colunas opcionais.
-
Local do marcador [obrigatório]
OU
A primeira coluna é um endereço de string específico (por exemplo, "1600 Pennsylvania Ave").As duas primeiras colunas são numéricas, em que a primeira é a latitude e a segunda é a longitude.
Observação: embora os códigos ISO 3166 sejam usados para o modo "regiões", o modo "marcadores" funciona melhor com nomes mais longos para regiões (como Alemanha, Panamá etc.). Isso ocorre porque, no modo "marcadores", os gráficos de mapa usam o Google Maps para geocodificar os locais (convertendo um local de string em latitude e longitude). Isso pode fazer com que locais ambíguos não sejam geocodificados como esperado, como "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 esse 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, os valores nulos não serão permitidos. Os valores são dimensionados em relação uns aos outros ou absolutamente aos valores especificados na propriedadecolorAxis.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 de marcador. 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, os valores nulos não serão permitidos.
Formato do modo de texto
O rótulo é inserido na primeira coluna, além de uma coluna opcional:
- Rótulo do texto [String, Obrigatório] Um endereço de string específico (por exemplo, "1600 Pennsylvania Ave").
- 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, todas as etiquetas terão o mesmo tamanho.
Opções de configuração
| Nome | |
|---|---|
| backgroundColor |
A cor do plano de fundo da área principal do gráfico. Pode ser uma string de cores HTML simples, por exemplo: 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
|
| Eixo de cores |
Um objeto que especifica um mapeamento entre valores e cores da coluna de cores ou uma escala de gradiente. Para especificar as propriedades desse objeto, use a notação literal de objeto, conforme 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 cor do gráfico. Valores de dados de cor deste valor
e inferiores serão renderizados como a primeira cor no intervalo 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 cor do gráfico. Valores de dados de cores deste valor
e superiores serão renderizados como a última cor no intervalo Tipo:número
Padrão: valor máximo da coluna de cor nos dados do gráfico
|
| colorAxis.values |
Se estiver presente, controla como os valores são associados às cores. Cada valor é associado à
cor correspondente na matriz Tipo:matriz de números
Padrão: nulo
|
| colorAxis.colors |
Cores para atribuir aos valores na visualização. Uma matriz de strings, em que cada elemento é uma string de cor HTML, por exemplo: Tipo: matriz de strings de cores
Padrão:nulo
|
| ColoraçãoDeRegiãoDeDados |
Cor a ser atribuída às regiões sem dados associados. Tipo: string
Padrão: '#F5F5F5'
|
| Cor padrão |
A cor a ser usada quando pontos de dados em um gráfico de local quando o local
(por exemplo, Tipo: string
Padrão: "#267114"
|
| Modo de exibição |
Que tipo de mapa geográfico é este. O formato da tabela de dados deve corresponder ao valor especificado. Os valores a seguir são compatíveis:
Tipo: string
Padrão: "auto"
|
| domínio |
Mostre o gráfico como se ele estivesse sendo exibido nesta região. Por exemplo, definir
Tipo: string
Padrão: nulo
|
| enableRegionInteractivity |
Se verdadeiro, ativa a interatividade da região, incluindo a concentração e a colaboração da gorjeta da ferramenta ao passar o cursor, além da seleção e do disparo da região de eventos O padrão é verdadeiro no modo região e falso no modo marcador. Tipo: booleano
Padrão:automático
|
| FrameIForce |
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: falso
|
| Versão geográfica |
A versão dos dados da borda do GeoChart. As versões Tipo: número
Padrão:10
|
| altura |
Altura da visualização, em pixels. A altura padrão é 347 pixels, a menos que a
opção Tipo:número
Padrão:automático
|
| Manter proporção |
Se for verdadeiro, o gráfico será desenhado com o maior tamanho possível dentro da área do gráfico na proporção natural. Se apenas uma das opções
Se for falso, o gráfico será esticado para o tamanho exato do gráfico conforme especificado pelas opções Tipo: booleano
Padrão: verdadeiro
|
| 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, conforme mostrado aqui: {textStyle: {color: 'blue', fontSize: 16}}
Tipo:objeto / "nenhum"
Padrão:nulo
|
| Formato da número de legendas |
Uma string de formato para rótulos numéricos. Esse é um subconjunto do
conjunto de padrões de ICU
.
Por exemplo, Tipo: string
Padrão:automático
|
| legenda.Estilodetexto |
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 Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| region |
A área a ser exibida no gráfico. As áreas próximas também serão exibidas. Será um dos seguintes valores:
Tipo: string
Padrão: "world"
|
| lupa |
Um objeto com membros para configurar vários aspectos da lupa. Para especificar propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: {enable: true, zoomFactor: 7.5}
Tipo: Objeto
Padrão:
{enable: true, zoomFactor: 5.0} |
| ampliaringGlass.enable |
Se for verdadeiro, quando o usuário permanecer sobre um marcador desorganizado, uma lupa será aberta. Observação: esse recurso não é compatível com navegadores que não oferecem suporte ao SVG, por exemplo, Internet Explorer versão 8 ou anterior. Tipo: booleano
Padrão: verdadeiro
|
| lupaingGlass.zoomFactor |
O fator de zoom da lupa. Pode ser qualquer número maior que 0. Tipo:número
Padrão:5
|
| marcador Opacidade |
A opacidade dos marcadores, em que 0.0 é totalmente transparente e 1.0 é totalmente opaco. Tipo:número, 0,0 a 1,0
Padrão: 1.0
|
| Versão do código de região |
A versão dos dados do regionalcoder. As versões Tipo:número
Padrão:0
|
| resolution |
A resolução das bordas do gráfico. Escolha um dos seguintes valores:
Tipo: string
Padrão: "countries"
|
| tamanho do eixo |
Um objeto com os membros para configurar como os valores são associados ao tamanho do balão. Para especificar propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: {minValue: 0, maxSize: 20}
Tipo: objeto
Padrão: nulo
|
| tamanhoAxis.maxSize |
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 Tipo:número
Padrão: valor máximo da coluna de tamanho nos dados do gráfico
|
| tamanhoAxis.minSize |
Raio mínimo do menor balão possível, em pixels. Tipo:número
Padrão: 3
|
| tamanhoAxis.minValue |
O valor do tamanho (conforme aparece nos dados do gráfico) a ser mapeado para 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, conforme 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 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:
Tipo: string
Padrão: "focus"
|
| largura |
Largura da visualização, em pixels. A largura padrão é de 556 pixels, a menos que a opção Tipo:número
Padrão:automático
|
Hierarquia e códigos de continente
É possível mostrar gráficos 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 códigos desenvolvidos e mantidos pela
Divisão de Estatísticas 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, 22 | |
017: África do Sul |
AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD | |
014: África Oriental |
BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, RE, {2 22 , 2, 2, 2, 2, 2 , 2 2, 2, 2 , 2 2, 2 , 2 ; | |
018: África do Sul |
BW, LS, NA, SZ, ZA | |
150: Europa |
154: norte da Europa |
GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, É, V2} |
155: Europa Ocidental |
AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL | |
151: Europa Oriental |
BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA | |
039 – Sul da Europa |
ANÚNCIO, AL, BA, ES, GI, GR, HR, TI, ME, MK, MT, 22 | |
019: Américas |
021: América do Norte |
BM, CA, GL, PM, US |
029: Caribe |
Em seguida, as {/0} | |
013: América Central |
BZ, CR, GT, HN, MX, NI, PA, SV | |
005: América do Sul |
AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY, , , , , e 2} | |
142 – Ásia |
143 – Ásia Central |
TM, TJ, KG, KZ, UZ |
030 – Ásia Oriental |
CN, HK, JP, KP, KR, MN, MO, TW | |
034: sul da Ásia |
AF, BD, BT, IN, IR, LK, MV, NP, PK | |
035: Sudeste Asiático |
BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL, V2, 22}V | |
145: Ásia Ocidental |
AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW, Y{/22 | |
009: Oceania |
053: Austrália e Nova Zelândia |
Austrália, NF, NZ |
054 – Melanésia |
FJ, NC, PG, SB, VU | |
057 – Micronésia |
FM, GU, KI, MH, MP, NR, 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. Tipo de retorno:nenhum
|
draw(data, options) |
Desenha o gráfico. O gráfico aceita mais chamadas de método somente após o evento Tipo de retorno:nenhum
|
getImageURI() |
Retorna o gráfico serializado como um URI de imagem. Chame essa função após o gráfico ser desenhado. Consulte Como imprimir gráficos PNG. Tipo de retorno:string
|
getSelection() |
Retorna uma matriz das entidades do gráfico selecionadas.
Entidades selecionáveis são regiões com um valor atribuído.
Nesse gráfico, apenas uma entidade pode ser selecionada por vez.
Tipo de retorno: matriz de elementos de seleção
|
setSelection() |
Seleciona as entidades do gráfico especificadas. Cancela qualquer seleção anterior.
Entidades selecionáveis são regiões com um valor atribuído.
Somente uma entidade pode ser selecionada por vez para este gráfico.
Tipo de retorno:nenhum
|
Eventos
| Nome | |
|---|---|
error |
Disparado quando ocorre um erro ao tentar renderizar o gráfico. Propriedades: ID e mensagem
|
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 Propriedades: nenhuma
|
regionClick |
Chamado quando uma região é clicada. Ele não será gerado para o país específico atribuído na opção "região" (se um país específico tiver sido 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
Propriedades: nenhuma
|
Política de dados
Os locais são geocodificados pelo Google Maps. Os dados que não exigem geocodificação não são enviados aos servidores. Consulte os Termos de Serviço do Google Maps para mais informações sobre a política de dados deles.