Descripción general
Un geográfico es un mapa de un país, un continente o una región con áreas identificadas de una de las siguientes tres maneras:
- El modo region puede colorear regiones completas, como países, provincias o estados.
- El modo marcadores utiliza círculos para designar las regiones que se escalan según el valor que especifiques.
- El modo text etiqueta las regiones con identificadores (p.ej., "Rusia" o "Asia").
Se renderiza un geográfico dentro del navegador con SVG o VML. Ten en cuenta que el geográfico no se puede desplazar ni arrastrar. Además, es un dibujo de líneas en lugar de un mapa de relieve. Si lo deseas, usa una visualización de mapa.
Gráficos geográficos regionales
El estilo regions
abarca regiones completas (por lo general, países) con colores correspondientes a los valores que asignas.
<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
El estilo markers
renderiza círculos en las ubicaciones especificadas en el geográfico, con el color y el tamaño que especifiques.
Coloca el cursor sobre los marcadores desordenados alrededor de Roma y se abrirá una lupa que mostrará los marcadores con más detalle. (La lupa no es compatible con Internet Explorer 8 o versiones anteriores).
<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>
Visualización de marcadores proporcionales
Por lo general, los diagramas geográficos de marcadores muestran el valor más pequeño del marcador como un punto mínimo. Si, en cambio, deseas que se muestren los valores proporcionales del marcador (por ejemplo, porque son porcentajes), usa la opción sizeAxis
para establecer minValue
y maxValue
de forma explícita.
Por ejemplo, a continuación, se presenta un mapa de Europa Occidental con poblaciones y áreas para tres países: Francia, Alemania y Polonia. Las poblaciones son números absolutos (p.ej., 65 millones para Francia), pero las áreas son todos los porcentajes del marcador completo: el marcador de Francia es de color violeta, ya que su población está abrumando, pero tiene el tamaño 50 (de un total de 100 posible) porque contiene el 50% del área combinada.
En este código, usamos sizeAxis
para especificar los tamaños de los marcadores en el rango de 0 a 100. También usamos un colorAxis
con valores RGB para mostrar las poblaciones como un rango de colores de naranja a azul, un espectro que funcionará bien para los usuarios con deficiencias en la visión de colores. Por último, especificamos Europa occidental con una region
de 155, según la sección "Jerarquía y códigos de contenido" más adelante en este 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
Puedes superponer etiquetas de texto en un gráfico geográfico con 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>
Cómo colorear el gráfico
Existen varias opciones para personalizar los colores de los gráficos geográficos:
colorAxis
: Es el espectro de colores que se usará para las regiones en la tabla de datos.backgroundColor
: Es el color de fondo del gráfico.datalessRegionColor
: Es el color que se asignará a las regiones sin datos asociados.defaultColor
: Es el color que se asignará a las regiones de la tabla de datos para las que el valor seanull
o no se especifique.
La opción colorAxis
es importante, ya que especifica el rango de colores para los valores de datos. En el arreglo colorAxis
, el primer elemento es el color asignado al valor más pequeño de tu conjunto de datos y el último es el color asignado al valor más grande de tu conjunto de datos. Si especificas más de dos colores, se producirá una interpolación entre ellos.
En el siguiente gráfico, usaremos las cuatro opciones. El colorAxis
se usa para mostrar África con los colores de la bandera panafricana, mediante las latitudes de los países: del rojo al norte, al negro y al verde en el sur. La opción backgroundColor
se usa para colorear el fondo de color celeste, datalessRegionColor
para que los países que no sean africanos sean de color rosa claro y defaultColor
para colorargascar.
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>
Cargando
El nombre del paquete google.charts.load
es "geochart"
.
Ten en cuenta que no debes copiar mapsApiKey, ya que no funcionará. Siempre que tu gráfico no requiera geocodificación o no use códigos no estándar para identificar ubicaciones, no necesitas una mapsApiKey. Para obtener más información, consulta Configuración de carga.
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' });
El nombre de la clase de visualización del diagrama geográfico es google.visualization.GeoChart
.
var visualization = new google.visualization.GeoChart(container);
Formato de los datos
El formato de la tabla de datos varía según el modo de visualización que uses: regions
, markers
o text
.
Formato del modo Regiones
La ubicación se ingresa en una columna más una columna opcional como se describe aquí:
-
Ubicación de la región [String, required]: Una región para destacar.
Se aceptan los siguientes formatos. Puedes usar formatos diferentes en filas diferentes:
- Un nombre de país como una string (por ejemplo, "Inglaterra") o un código ISO-3166-1 alpha-2 en mayúscula o su equivalente en inglés (por ejemplo, "GB" o "Reino Unido").
- Un nombre de código de región ISO-3166-2 en mayúscula o su equivalente en inglés (por ejemplo, "US-NJ" o "Nueva Jersey").
- Un código de área metropolitana. Estos son códigos de área metropolitana de tres dígitos que se utilizan para designar varias regiones. Solo se admiten códigos de EE.UU. Ten en cuenta que no son los mismos que los códigos de área telefónicos.
- Cualquier valor admitido por la propiedad
region
.
-
Color de región [Number, Optional]: Una columna numérica opcional que se usa para asignar un color a esta región, en función de la escala especificada en la propiedad
colorAxis.colors
. Si esta columna no está presente, todas las regiones tendrán el mismo color. Si la columna está presente, no se permiten valores nulos. Los valores se escalan en relación con los valoressizeAxis.minValue
/sizeAxis.maxValue
o los valores especificados en la propiedadcolorAxis.values
, si se proporciona.
Formato del modo de marcadores
La cantidad de columnas varía según el formato de marcador utilizado, así como otras columnas opcionales.
-
Ubicación del marcador [obligatorio]
O
La primera columna es una dirección de string específica (por ejemplo, “1600 Pennsylvania Ave).Las primeras dos columnas son numéricas; la primera columna es la latitud y la segunda columna es la longitud.
Nota: Aunque recomendamos que los códigos ISO 3166 se usen para el modo "regiones", el modo "marcadores" funciona mejor con nombres largos para regiones (como Alemania, Panamá, etc.). Esto se debe a que los diagramas geográficos, cuando se encuentran en modo de "marcadores", usan Google Maps para realizar la codificación geográfica de las ubicaciones (convertir la ubicación de una string en una latitud y longitud). Esto puede provocar que las ubicaciones ambiguas no reciban geocodificación como se espera, como "DE" significa Alemania, Delaware o "PA" para Panamá o Pensilvania.
-
Color del marcador [Number, Opcional] La siguiente columna es una columna numérica opcional que se usa para asignar un color a este marcador, según la escala especificada en la propiedad
colorAxis.colors
. Si esta columna no está presente, todos los marcadores tendrán el mismo color. Si la columna está presente, no se permiten valores nulos. Los valores se escalan en relación con los demás, o absolutamente con los valores especificados en la propiedadcolorAxis.values
. - Tamaño del marcador [Number, Optional]: Es una columna numérica opcional que se usa para asignar el tamaño del marcador en relación con los otros tamaños de marcador. Si esta columna no está presente, se usará el valor de la columna anterior (o el tamaño predeterminado si no se proporciona una columna de color). Si la columna está presente, no se permiten valores nulos.
Formato de modo de texto
La etiqueta se ingresa en la primera columna, más una columna opcional:
- Etiqueta de texto [String, Obligatorio] Una dirección de string específica (por ejemplo, “1600 Pennsylvania Ave.”).
- Tamaño del texto [Number, Optional]: La segunda columna es una columna numérica opcional que se usa para asignar el tamaño de la etiqueta. Si esta columna no está presente, todas las etiquetas tendrán el mismo tamaño.
Opciones de configuración
Nombre | |
---|---|
Color de fondo |
El color de fondo para el área principal del gráfico Puede ser una string simple de color HTML, por ejemplo: Type: string o objeto
Predeterminado: blanco
|
fondoColor.fill |
El color de relleno del gráfico, como una string de color HTML. Tipo: string
Predeterminado: blanco
|
backgroundColor |
El color del borde del gráfico, como una string de color HTML Tipo: string
Valor predeterminado: "#666"
|
backgroundColor.strokeWidth, |
El ancho del borde, en píxeles. Tipo: número
Valor predeterminado: 0
|
eje color |
Un objeto que especifica una asignación entre los valores de columnas de color y los colores o una escala de gradiente. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra aquí: {minValue: 0, colors: ['#FF0000', '#00FF00']} Type:
Valor predeterminado: null
|
ColorAxis.minValue |
Si está presente, especifica un valor mínimo para los datos de color del gráfico. Los valores de datos de color de este valor y de uno inferior se procesarán como el primer color en el rango Tipo: número
Predeterminado: Valor mínimo de la columna de color en los datos del gráfico
|
ColorAxis.maxValue |
Si está presente, especifica un valor máximo para los datos de color del gráfico. Los valores de datos de color de este valor y de uno superior se procesarán como el último color en el rango Tipo: número
Predeterminado: Valor máximo de la columna de color en los datos del gráfico
|
colorAxis.values |
Si está presente, controla cómo se asocian los valores con los colores. Cada valor se asocia con el color correspondiente en el arreglo Tipo: arreglo de números
Valor predeterminado: null
|
colorAxis.colors |
Colores para asignar a los valores en la visualización. Un arreglo de strings, en la que cada elemento es una string de color HTML, por ejemplo: Tipo: arreglo de strings de color
Valor predeterminado: null
|
ColorlessRegionColor |
Color para asignar a las regiones sin datos asociados. Tipo: string
Predeterminado: “#F5F5F5”
|
Color predeterminado |
El color que se usará para los datos en un diagrama geográfico cuando la ubicación (p.ej., Tipo: string
Configuración predeterminada: "#267114"
|
Modo de visualización |
Este tipo de geográfico es este. El formato de la tabla de datos debe coincidir con el valor especificado. Se admiten los siguientes valores:
Tipo: string
Configuración predeterminada: "auto"
|
dominio |
Muestra el diagrama geográfico como si se estuviera publicando desde esta región. Por ejemplo, si configuras Tipo: string
Valor predeterminado: null
|
habilitarRegionInteractivity |
Si es verdadero, habilita la interactividad de la región, incluidos el enfoque y la elaboración de la información sobre la herramienta cuando se coloca el cursor del mouse sobre una región, y la selección y activación de eventos de El valor predeterminado es verdadero en modo de región y falso en modo de marcador. Tipo: booleano
Predeterminado: automático
|
forceIFrame |
Dibuja el gráfico dentro de un marco intercalado. (Ten en cuenta que, en IE8, esta opción se ignora; todos los gráficos de IE8 se dibujan en i-frames). Tipo: booleano
Valor predeterminado: falso
|
Versión de geográfico |
La versión de los datos de borde de GeoChart. Están disponibles las versiones Tipo: número
Predeterminado: 10
|
alto |
Altura de la visualización en píxeles. La altura predeterminada es de 347 píxeles, a menos que se especifique la opción Tipo: número
Predeterminado: automático
|
mantenerAspectRatio |
Si es verdadero, el diagrama geográfico se dibujará en el tamaño más grande que pueda caber dentro del área del gráfico en su relación de aspecto natural. Si solo se especifica una de las opciones
Si es falso, se expandirá el tamaño del gráfico geográfico hasta el tamaño exacto del gráfico, como se especifica en las opciones Tipo: booleano
Predeterminado: verdadero
|
leyenda |
Un objeto con miembros para configurar varios aspectos de la leyenda, o "none" si no aparece ninguna leyenda. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí: {textStyle: {color: 'blue', fontSize: 16}} Tipo:Objeto/ninguno
Valor predeterminado: null
|
leyenda.númeroFormato |
Una string de formato para etiquetas numéricas. Este es un subconjunto del conjunto de patrones de ICU.
Por ejemplo, Tipo: string
Predeterminado: automático
|
leyenda.texto |
Un objeto que especifica el estilo de texto de la leyenda. El objeto tiene este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
region |
El área que se mostrará en el diagrama geográfico. (También se mostrarán las áreas circundantes). Puede ser uno de los siguientes:
Tipo: string
Predeterminado: "world"
|
lupa |
Un objeto con miembros para configurar varios aspectos de la lupa. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí: {enable: true, zoomFactor: 7.5} Type: Objeto
Predeterminado:
{enable: true, zoomFactor: 5.0} |
LupaGlass.enable |
Si es así, cuando el usuario se desplace sobre un marcador desordenado, se abrirá una lupa. Nota: Esta función no es compatible con los navegadores que no admiten SVG, es decir, Internet Explorer 8 o versiones anteriores. Tipo: booleano
Predeterminado: verdadero
|
lupa.Glass.zoomFactor |
Factor de zoom de la lupa Puede ser cualquier número mayor que 0. Tipo: número
Predeterminado: 5.0
|
Opacidad del marcador |
La opacidad de los marcadores, donde 0.0 es completamente transparente y 1.0 es completamente opaco. Tipo: número, 0.0–1.0
Predeterminado: 1.0
|
Versión de CodeCoder |
La versión de los datos del codificador de región. Están disponibles las versiones Tipo: número
Predeterminado: 0
|
resolution |
La resolución de los bordes del diagrama geográfico. Elige uno de los siguientes valores:
Tipo: string
Predeterminado: "países"
|
Eje de tamaño |
Un objeto con miembros para configurar cómo se asocian los valores con el tamaño de burbuja. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí: {minValue: 0, maxSize: 20} Type:
Valor predeterminado: null
|
sizeAxis.maxSize. |
Radio máximo de la burbuja más grande posible, en píxeles. Tipo: número
Predeterminado: 12
|
sizeAxis.maxValue. |
El valor de tamaño (como aparece en los datos del gráfico) que se asignará a Tipo: número
Predeterminado: Valor máximo de la columna de tamaño en los datos del gráfico
|
sizeAxis.minSize |
Radio mínimo del cuadro más pequeño posible, en píxeles. Tipo: número
Predeterminado: 3
|
sizeAxis.minValue |
El valor de tamaño (como aparece en los datos del gráfico) que se asignará a Tipo: número
Predeterminado: Valor mínimo de la columna de tamaño en los datos del gráfico
|
Información sobre la herramienta |
Un objeto con miembros para configurar varios elementos de información sobre la herramienta. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí: {textStyle: {color: '#FF0000'}, showColorCode: true} Type:
Valor predeterminado: null
|
tooltip.textStyle |
Un objeto que especifica el estilo de texto de la información sobre la herramienta. El objeto tiene este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Información sobre la herramienta |
La interacción del usuario que hace que se muestre la información sobre la herramienta:
Tipo: string
Predeterminado: "enfoque"
|
ancho |
Ancho de la visualización, en píxeles El ancho predeterminado es de 556 píxeles, a menos que se especifique la opción Tipo: número
Predeterminado: automático
|
Jerarquía y códigos de continente
Es posible mostrar diagramas geográficos de continentes o subcontinentes mediante la configuración de la opción region
en uno de los siguientes códigos de 3 dígitos. Los códigos y la jerarquía se basan, con algunas excepciones, en los desarrollados y mantenidos por la División de Estadística de las Naciones Unidas.
Continente | Subcontinente | Países |
---|---|---|
002 : África |
015 : África del Norte |
DZ, EG, EH, LY, MA, SD, SS, TN |
011 : África Occidental |
BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, {202, 222222 | |
017 : África Central |
AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD | |
014 : África oriental |
BI, DJ, ER, ET, KE, KM, MG, MU, MW, Z2,22Z2,72Z2,7 | |
018 : sur de África |
BW, LS, NA, SZ, ZA | |
150 : Europa |
154 : Norte de Europa |
GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, ES, {22 7} |
155 : Europa Occidental |
AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL | |
151 : Europa del Este |
BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA | |
039 : sur de Europa |
AD, AL, BA, ES, GI, GR, HR, IT, ME, MK{/19, MT{/21, | |
019 : América |
021 : Norteamérica |
BM, CA, GL, PM, US |
029 : caribeño |
<3}<2}77"> | |
013 : América Central |
BZ, CR, GT, HN, MX, NI, PA, SV | |
005 - Sudamérica |
AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY, VE22 | |
142 : Asia |
143 : Asia Central |
TM, TJ, KG, KZ, UZ |
030 : Asia oriental |
CN, HK, JP, KP, KR, MN, meses, TW | |
034 : Asia meridional |
AF, BD, BT, IN, IR, LK, MV, NP, PK | |
035 : Sudeste Asiático |
BN, ID, KH, LA, MM, BU, MI, PH, SG, TH, TL, | |
145 : Asia Occidental |
AE, A.M., AZ, BH, CY, GE, IL, KW, 7{20;3 | |
009 - Oceanía |
053 : Australia y Nueva Zelanda |
AU, NF y NZ |
054 - Melanesia |
FJ, NC, PG, SB y VU | |
057 : Micronesia |
FM, GU, KI, MH, MP, NR y PW | |
061 - Polinesia |
AS, CK, NU, PF, PN, TK, A, TV, WF, WS |
Métodos
Método | |
---|---|
clearChart() |
Borra el gráfico y libera todos los recursos asignados. Tipo de datos que se muestra: ninguno
|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas a métodos después de que se activa el evento Tipo de datos que se muestra: ninguno
|
getImageURI() |
Muestra el gráfico serializado como un URI de imagen. Llámelo después de que se dibuje el gráfico. Consulta Cómo imprimir gráficos PNG. Tipo de datos que se muestra: string
|
getSelection() |
Muestra un arreglo de las entidades del gráfico seleccionadas.
Las entidades seleccionables son regiones con un valor asignado.
Para este gráfico, solo se puede seleccionar una entidad por momento.
Tipo de datos que se muestra: arreglo de elementos de selección
|
setSelection() |
Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior.
Las entidades seleccionables son regiones con un valor asignado.
Para este gráfico, solo se puede seleccionar una entidad a la vez.
Tipo de datos que se muestra: ninguno
|
Eventos
Nombre | |
---|---|
error |
Se activa cuando se produce un error cuando se intenta procesar el gráfico. Propiedades: ID, mensaje
|
ready |
El gráfico está listo para las llamadas a métodos externos. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método Propiedades: ninguna
|
regionClick |
Se llama cuando se hace clic en una región. No se mostrará en el país específico asignado en la opción “región” (si se incluyó en un país específico).
Propiedades: Un objeto con una sola propiedad,
region , que es una string en formato ISO-3166 que describe la región en la que se hizo clic.
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué elementos se seleccionaron, llama a Propiedades: ninguna
|
Política de Datos
Las ubicaciones codifican geográficamente Google Maps. Los datos que no requieren geocodificación no se envían a ningún servidor. Consulta las Condiciones del Servicio de Google Maps para obtener más información sobre sus políticas de datos.