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 estas tres formas:
- El modo region aplica colores a regiones completas, como países, provincias o estados.
- El modo marcadores usa círculos para designar las regiones que se ajustan según el valor que especifiques.
- El modo text etiqueta las regiones con identificadores (p.ej., “Rusia” o “Asia”).
Un diagrama geográfico se renderiza dentro del navegador con SVG o VML. Ten en cuenta que el diagrama geográfico no se puede desplazar ni arrastrar, y es un dibujo de líneas en lugar de un mapa de terreno. Si deseas algo de eso, considera una visualización de mapa en su lugar.
Gráficos geográficos de regiones
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
Con el estilo markers, se renderizan círculos en ubicaciones específicas del geográfico, con el color y el tamaño que especifiques.
Intenta colocar el cursor sobre los marcadores desordenados que rodean Roma, y se abrirá una lupa que los mostrará con más detalle. (La lupa no es compatible con Internet Explorer 8 ni 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>
Cómo mostrar 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. En cambio, si deseas mostrar valores de marcadores proporcionales (por ejemplo, porque son porcentajes), usa la opción sizeAxis para configurar minValue y maxValue de forma explícita.
Por ejemplo, aquí tienes un mapa de Europa Occidental con poblaciones y áreas de tres países: Alemania, Francia y Polonia. Las poblaciones son todos números absolutos (p.ej., 65 millones para Francia), pero las áreas son todos porcentajes del total: el marcador de Francia es de color violeta porque su población es media, pero tiene un tamaño de 50 (un 100 posible) porque contiene el 50% del área combinada.
En este código, usamos sizeAxis para especificar tamaños de marcadores en un 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 los 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 diagrama 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 tu gráfico
Existen varias opciones para personalizar los colores de los GeoCharts:
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 seanullo no especificado.
La opción colorAxis es la importante: especifica el rango de colores para los valores de tus datos. En el array colorAxis, el primer elemento es el color que se otorga al valor más pequeño de tu conjunto de datos, y el último elemento es el color que se le otorga al valor más grande de tu conjunto de datos. Si especificas más de dos colores, se interpolará entre ellos.
En el siguiente gráfico, usaremos las cuatro opciones. colorAxis se usa para mostrar África con los colores de la bandera panafricana, según las latitudes de los países: desde el rojo en el norte, hasta el negro y el verde en el sur. La opción backgroundColor se usa para colorear el fondo de celeste, datalessRegionColor para colorear los países no africanos de rosa claro y 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>
Cargando
El nombre del paquete google.charts.load es "geochart".
Ten en cuenta que no debes copiar nuestra mapsApiKey; eso no funcionará. Siempre y cuando tu gráfico no requiera geocodificación ni uses códigos no estándares para identificar ubicaciones, no necesitas una mapApiKey. Para obtener más información, consulta
Cómo cargar la configuración.
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 de diagrama geográfico es google.visualization.GeoChart.
var visualization = new google.visualization.GeoChart(container);
Formato de los datos
El formato de DataTable varía según el modo de visualización que uses: regions, markers o text.
Formato del modo de regiones
La ubicación se ingresa en una columna, más una columna opcional, como se describe a continuación:
-
Region location [String, Required]: Es una región que se debe destacar.
Se aceptan todos los formatos que se indican a continuación. Puedes usar diferentes formatos en distintas filas:
- Un nombre de país como una cadena (por ejemplo, “Inglaterra”), un código ISO-3166-1 alpha-2 en mayúsculas o su equivalente de texto en inglés (por ejemplo, “GB” o “United Kingdom”).
- Un nombre de código regional ISO-3166-2 en mayúsculas o su equivalente de texto 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 usan para designar varias regiones. Solo se admiten los códigos de EE.UU. Ten en cuenta que no son lo mismo que los códigos de área telefónicos.
- Cualquier valor admitido por la propiedad
region
-
Color de región [Número, opcional]: Es una columna numérica opcional que se usa para asignar un color a esta región, según la escala especificada en la propiedad
colorAxis.colors. Si esta columna no está presente, todas las regiones serán del mismo color. Si la columna está presente, no se permiten valores nulos. Los valores se escalan en relación con los valoressizeAxis.minValueysizeAxis.maxValue, o con 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 cadena 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: Si bien recomendamos el uso de códigos ISO 3166 para el modo "regiones", el modo "marcadores" funciona mejor con nombres más largos de regiones (como Alemania, Panamá, etc.). Esto se debe a que los geográficos, cuando están en el modo de marcadores, usan Google Maps para geocodificar las ubicaciones (convirtiendo una ubicación de cadena en una latitud y longitud). Por lo tanto, es posible que las ubicaciones ambiguas no se codifiquen geográficamente como cabría esperar; por ejemplo, "DE" significa Alemania o Delaware, o "PA" significa Panamá o Pensilvania.
-
Color del marcador [Número, 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 serán del mismo color. Si la columna está presente, no se permiten valores nulos. Los valores se escalan uno respecto del otro o absolutamente según valores especificados en la propiedadcolorAxis.values. - Tamaño del marcador [Número, opcional] Es una columna numérica opcional que se usa para asignar el tamaño del marcador en relación con los demás 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 también 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 [Número, opcional] 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 | |
|---|---|
| backgroundColor |
El color de fondo del área principal del gráfico. Puede ser una cadena simple de color HTML, por ejemplo: Tipo: objeto o cadena
Predeterminado: blanco
|
| backgroundColor.fill |
El color de relleno del gráfico, como una cadena HTML de color. Tipo: string
Predeterminado: blanco
|
| backgroundColor.stroke |
El color del borde del gráfico, como una cadena de color HTML. Tipo: string
Predeterminado: “#666”
|
| backgroundColor.strokeWidth |
Es el ancho del borde en píxeles. Tipo: Número
Valor predeterminado: 0
|
| colorAxis |
Es un objeto que especifica una asignación entre los valores y los colores de la columna de colores o una escala de gradiente. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Tipo: objeto
Valor predeterminado: nulo
|
| 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 valores inferiores se renderizará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 versiones superiores se renderizarán como el último color del 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 array Tipo: array de números
Valor predeterminado: nulo
|
| colorAxis.colors |
Colores para asignar a valores en la visualización. Un array de cadenas, en el que cada elemento es una cadena de color HTML, por ejemplo: Tipo: matriz de cadenas de color
Valor predeterminado: nulo
|
| datalessRegionColor |
Color para asignar a regiones sin datos asociados. Tipo: string
Predeterminado: “#F5F5F5”
|
| defaultColor |
Es el color que se usa para los puntos de datos de un diagrama geográfico cuando la ubicación (p.ej., Tipo: string
Predeterminado: “#267114”
|
| displayMode |
De qué tipo de diagrama geográfico es este. El formato DataTable 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 enviando desde esta región. Por ejemplo, si configuras Tipo: string
Valor predeterminado: nulo
|
| enableRegionInteractivity |
Si es verdadero, habilita la interactividad de regiones, lo que incluye el enfoque y la elaboración de sugerencias con herramientas cuando se coloca el cursor sobre el mouse, y la selección y activación de regiones de eventos El valor predeterminado es verdadero en el modo de región y falso en el modo de marcador. Tipo: booleano
Predeterminada: automática
|
| 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 iframes). Tipo: booleano
Predeterminado: falso
|
| geochartVersion |
La versión de los datos del borde de GeoChart. Hay versiones Tipo: Número
Valor predeterminado: 10
|
| height |
Es la 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
Predeterminada: automática
|
| keepAspectRatio |
Si es verdadero, el geográfico se dibujará en el tamaño más grande que pueda caber dentro del área del gráfico con su relación de aspecto natural. Si solo se especifica una de las opciones
Si es falso, el diagrama geográfico se ampliará hasta el tamaño exacto del gráfico que se especifica en las opciones Tipo: booleano
Predeterminado: verdadero
|
| leyenda |
Un objeto con miembros para configurar varios aspectos de la leyenda, o “ninguno”, si no debería aparecer ninguna. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {textStyle: {color: 'blue', fontSize: 16}}
Tipo: Objeto o “ninguno”
Valor predeterminado: nulo
|
| legend.numberFormat |
Es una cadena de formato para etiquetas numéricas. Este es un subconjunto del
conjunto de patrones de ICU
.
Por ejemplo, Tipo: string
Predeterminada: automática
|
| legend.textStyle |
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> }
Tipo: objeto
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 aledañas). Puede ser una de las siguientes opciones:
Tipo: string
Predeterminado: "mundo"
|
| magnifyingGlass |
Un objeto con miembros para configurar varios aspectos de la lupa. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {enable: true, zoomFactor: 7.5}
Tipo: Objeto
Valor predeterminado:
{enable: true, zoomFactor: 5.0} |
| magnifyingGlass.enable |
Si esta preferencia se establece como "true", cuando el usuario se detenga sobre un marcador desordenado, se abrirá una lupa. Nota: Esta función no se admite en los navegadores que no admiten SVG, es decir, Internet Explorer 8 o versiones anteriores. Tipo: booleano
Predeterminado: verdadero
|
| magnifyingGlass.zoomFactor |
El factor de zoom de la lupa. Puede ser cualquier número superior a 0. Tipo: Número
Predeterminado: 5.0
|
| markerOpacity |
La opacidad de los marcadores, donde 0.0 es completamente transparente y 1.0 es completamente opaco. Tipo: número, de 0.0 a 1.0
Predeterminado: 1.0
|
| regioncoderVersion |
La versión de los datos del codificador de región. Hay versiones Tipo: Número
Valor predeterminado: 0
|
| resolution |
La resolución de los bordes del diagrama geográfico. Elige uno de los siguientes valores:
Tipo: string
Predeterminada: "países"
|
| sizeAxis |
Un objeto con miembros para configurar cómo se asocian los valores con el tamaño de burbuja. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {minValue: 0, maxSize: 20}
Tipo: objeto
Valor predeterminado: nulo
|
| sizeAxis.maxSize |
Radio máximo de la burbuja más grande posible, en píxeles. Tipo: Número
Valor 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 de la burbuja más pequeña posible, en píxeles. Tipo: Número
Valor 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
|
| cuadro de información |
Un objeto con miembros para configurar varios elementos de información sobre la herramienta. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo: objeto
Valor predeterminado: nulo
|
| 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> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
La interacción del usuario que hace que se muestre el cuadro de información:
Tipo: string
Predeterminado: "foco"
|
| width |
Es el 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
Predeterminada: automática
|
Jerarquía y códigos de los continentes
Es posible mostrar diagramas geográficos de continentes o subcontinentes si configuras 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 aquellos que desarrolla y mantiene la
División de Estadísticas de las Naciones Unidas
.
| Continente | Subcontinente | Países |
|---|---|---|
002, África |
015, Norte de África |
DZ, EG, EH, LY, MA, SD, SS y TN |
011 (África Occidental) |
BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, MR2}, MR2}..2}MR2}, 16} yMR22}22} y2}22}22,y "MR2},y "MR2},2}SHSN | |
017 (África Media) |
AO, CD, ZR, CF, CG, CM, GA, GQ, ST y TD | |
014 - África Oriental |
BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, KM, UG | |
018, Sur de África |
BW, LS, NA, SZ, ZA | |
150: Europa |
154 (Europa Septentrional) |
GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, IS, IS, IS, ISLV |
155 (Europa Occidental) |
AT, BE, CH, DE, DD, FR, FX, LI, LU, MC y NL | |
151 - Europa del Este |
BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK y UA | |
039 (Sur de Europa) |
AD, AL, BA, ES, GI, GR, HR, IT, ME, MK, MT, MT... MT2}0}0}}2} | |
019 - América |
021 (Norteamérica) |
BM, CA, GL, PM, US |
029: Caribe |
AG, AI, AN, AW, BB, BL, BS, CU, DM, DO, GDGPLCMS | |
013: Centroamérica |
BZ, CR, GT, HN, MX, NI, PA y SV | |
005: Sudamérica |
AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY,, PY, {2{/U2}SRVE | |
142: Asia |
143 - Asia Central |
TM, TJ, KG, KZ y UZ |
030 - Asia Oriental |
CN, HK, JP, KP, KR, MN, MO y TW | |
034 (Sur de Asia) |
AF, BD, BT, IN, IR, LK, MV, NP y PK | |
035 (Sudeste Asiático) |
BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL, TL, TL VN | |
145 - Asia Occidental |
AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW, LB, CY, GE, IL, IL, IQ, JO, KW, KW, 2} | |
009, Oceanía |
053: Australia y Nueva Zelanda |
AU, NF, 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, TO, TV, WF y WS |
Métodos
| Método | |
|---|---|
clearChart() |
Borra el gráfico y libera todos sus recursos asignados. Tipo de datos que se muestra: ninguno
|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas de método solo 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ámalo después de que se dibuje el gráfico. Consulta Cómo imprimir gráficos en PNG. Tipo de datos que se muestra: string
|
getSelection() |
Muestra un array 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 en un momento determinado.
Tipo de datos que se muestra: Es el array 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 renderizar el gráfico. Propiedades: ID, mensaje
|
ready |
El gráfico está listo para llamadas de método externas. 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. Esto no se arrojará para el país específico asignado en la opción “región” (si se incluyó un país específico).
Propiedades: Un objeto con una sola propiedad,
region, que es una cadena 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é se seleccionó, llama a Propiedades: ninguna
|
Política de datos
Google Maps geocodifica las ubicaciones. Los datos que no requieran 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 su política de datos.