Visualización: GeoChart

  1. Overview
  2. Gráficos geográficos regionales
  3. Gráficos geográficos de marcadores
  4. Gráficos geográficos de texto
  5. Cómo colorear tu gráfico
  6. Cargando
  7. Formato de los datos
  8. Opciones de configuración
  9. Métodos
  10. Eventos
  11. Política de datos

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.

Datos y opciones
  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>

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 sea null o 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.
Opciones
        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };
Página 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>

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:

  1. 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
  2. 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 valores sizeAxis.minValue y sizeAxis.maxValue, o con los valores especificados en la propiedad colorAxis.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]
    La primera columna es una dirección de cadena específica (por ejemplo, "1600 Pennsylvania Ave").

    O

    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 propiedad colorAxis.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: 'red' o '#00cc00', o un objeto con las siguientes propiedades.

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 colorAxis.colors.

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 colorAxis.colors.

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 colorAxis.colors. Estos valores se aplican a los datos de color del gráfico. La coloración se realiza según un gradiente de los valores especificados aquí. No especificar un valor para esta opción equivale a especificar [minValue, maxValue].

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: colorAxis: {colors:['red','#004411']}. Debes tener al menos dos valores; el gradiente incluirá todos tus valores, más los valores intermedios calculados, con el primer color como el valor más pequeño y el último color como el más alto.

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., 'US') está presente, pero el valor es null o no se especifica. Es distinto de datalessRegionColor, que es el color que se usa cuando faltan datos.

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:

  • "auto": elige según el formato de la DataTable.
  • “regiones”: Aplica colores a las regiones en el diagrama geográfico.
  • "markers": coloca marcadores en las regiones.
  • "texto": Etiqueta las regiones con texto de DataTable.
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 domain como 'IN', se mostrará a Cachemira como perteneciente a la India y no como un territorio en disputa.

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 regionClick y select cuando se hace clic con el mouse.

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 10 y 11 disponibles.

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 width y se establezca keepAspectRatio como verdadero. En este caso, la altura se calcula según corresponda.

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 width y height, la otra se calculará según la relación de aspecto.

Si es falso, el diagrama geográfico se ampliará hasta el tamaño exacto del gráfico que se especifica en las opciones width y height.

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, {numberFormat:'.##'} mostrará los valores “10.66”, “10.6” y “10.0” para los valores 10.666, 10.6 y 10.

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> }

color puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

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:

  • "mundo": un diagrama geográfico de todo el mundo.
  • Es un continente o subcontinente, especificado por su código de 3 dígitos, p.ej., "011" para África Occidental.
  • Un país, especificado por su código ISO 3166-1 alpha-2, p.ej., 'AU' para Australia.
  • Un estado de Estados Unidos, especificado por su código ISO 3166-2:US, p.ej., "US-AL" para Alabama. Ten en cuenta que la opción resolution se debe configurar como 'provincias' o 'metros'.
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 0 y 1 disponibles.

Tipo: Número
Valor predeterminado: 0
resolution

La resolución de los bordes del diagrama geográfico. Elige uno de los siguientes valores:

  • "country": Compatible en todas las regiones, excepto en las regiones estatales de EE.UU.
  • "provincias": Solo se admite para regiones de países y regiones de estados de EE.UU. No se admite en todos los países. Prueba en un país para ver si se admite esta opción.
  • 'metros': Solo se admite para la región del país de EE.UU. y las regiones del estado de EE.UU.
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 sizeAxis.maxSize. Los valores más altos se recortarán a este valor.

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 sizeAxis.minSize. Los valores más pequeños se recortarán a este valor.

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> }

color puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

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:

  • "enfoque": La información sobre la herramienta se mostrará cuando el usuario coloque el cursor sobre el elemento.
  • "none": No se mostrará la información sobre la herramienta.
  • "selección": La información sobre la herramienta se mostrará cuando el usuario seleccione el elemento.
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 height y keepAspectRatio se establezca en verdadero, en cuyo caso el ancho se calcula según corresponda.

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 ready. Extended description.

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. Extended description .

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. Extended description .

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 draw e llamarlos solo después de que se haya activado el evento.

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 getSelection().

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.