Visualización: GeoChart

  1. Descripción general
  2. Diagramas geográficos de la región
  3. Gráficos geográficos de marcadores
  4. Geográficos de texto
  5. Cómo colorear su gráfico
  6. Cargando
  7. Formato de 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 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.

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 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 sea null 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.
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 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í:

  1. 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.
  2. 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 valores sizeAxis.minValue/sizeAxis.maxValue o 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 string 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: 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 propiedad colorAxis.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: 'red' o '#00cc00', o un objeto con las siguientes propiedades.

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 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 uno superior se procesarán como el último color en el 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 arreglo 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: 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: 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: 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., 'US') está presente, pero el valor es null o no está especificado. Esto es diferente de datalessRegionColor, que es el color que se usa cuando faltan datos.

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:

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

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

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

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 width y se establezca keepAspectRatio como verdadero, en cuyo caso la altura se calcula en consecuencia.

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

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 width y height.

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

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

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

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:

  • "world": un diagrama geográfico de todo el mundo.
  • Un continente o un 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 debe establecerse en "provincias" o "metros".
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 0 y 1.

Tipo: número
Predeterminado: 0
resolution

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

  • 'países' [country]: es compatible con todas las regiones, excepto las regiones de los Estados Unidos.
  • 'provinces' [provincias]: solo se admite para regiones de países y regiones de estados de los EE.UU. No se admite en todos los países. Prueba uno para ver si se admite.
  • 'metros': Solo se admite en las regiones de EE.UU. y los estados de EE.UU.
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 sizeAxis.maxSize. Los valores mayores se recortarán para 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 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 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
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> }

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

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:

  • "focus": la información sobre la herramienta se mostrará cuando el usuario se desplace sobre el elemento.
  • "none": no se mostrará la información sobre la herramienta.
  • "selection": La información sobre la herramienta se mostrará cuando el usuario seleccione el elemento.
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 height y keepAspectRatio se establezca en verdadero, en cuyo caso el ancho se calcula en consecuencia.

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

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

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

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 draw y llamarlo solo después de que se active el evento.

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

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.