Visualizzazione: grafico geografico

  1. Panoramica
  2. Grafici geografici delle regioni
  3. Grafici geografici indicatori
  4. Grafici geografici di testo
  5. Colorare il grafico
  6. Caricamento in corso…
  7. Formato dei dati
  8. Opzioni di configurazione
  9. Metodi
  10. Eventi
  11. Norme sui dati

Panoramica

Un grafico geografico è una mappa di un paese, un continente o una regione con aree identificate in uno dei tre modi seguenti:

  • La modalità regione applica colori a intere regioni, come paesi, province o stati.
  • La modalità indicatori utilizza i cerchi per contrassegnare le regioni in scala in base a un valore da te specificato.
  • La modalità di testo etichetta le regioni con identificatori (ad es. "Russia" o "Asia").

Un grafico geografico viene visualizzato all'interno del browser utilizzando SVG o VML. Tieni presente che il grafico geografico non è scorrevole o trascinabile e si tratta di un disegno a linee invece di una mappa del rilievo. Se vuoi qualcosa di simile, prendi in considerazione una visualizzazione della mappa.

Grafici geografici per regione

Lo stile regions riempie intere regioni (in genere paesi) con colori corrispondenti ai valori che assegni.

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

Grafici geografici indicatori

Lo stile markers mostra i cerchi in posizioni specificate nel grafico geografico, con il colore e la dimensione specificati.
Prova a passare il mouse sopra gli indicatori caotici intorno a Roma: si aprirà una lente d'ingrandimento per mostrare più nel dettaglio gli indicatori. (La lente d'ingrandimento non è supportata in Internet Explorer 8 o versione precedente.)

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

Visualizzazione degli indicatori proporzionali

Di solito, i grafici geografici degli indicatori mostrano il valore dell'indicatore più piccolo come punto minimo. Se invece vuoi visualizzare valori degli indicatori proporzionali, ad esempio perché sono percentuali, utilizza l'opzione sizeAxis per impostare minValue e maxValue in modo esplicito.

Ecco un esempio di mappa dell'Europa occidentale con le popolazioni e le aree di tre paesi: Francia, Germania e Polonia. Le popolazioni sono tutte numeri assoluti (ad es. 65 milioni per la Francia), ma le aree sono tutte percentuali del tutto: l'indicatore Francia è di colore viola perché la sua popolazione è mediamente aritmetica, ma ha una dimensione di 50 (su un massimo di 100 possibili) perché contiene il 50% dell'area cumulativa.

In questo codice, utilizziamo sizeAxis per specificare le dimensioni degli indicatori nell'intervallo da 0 a 100. Utilizziamo anche colorAxis con valori RGB per mostrare le popolazioni sotto forma di una gamma di colori dall'arancione al blu, uno spettro adatto agli utenti con carenze di visione dei colori. Infine, specifichiamo l'Europa occidentale con un valore region pari a 155, come descritto nella sezione "Gerarchia dei contenuti e codici" più avanti in questo 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>

Grafici geografici di testo

Puoi sovrapporre etichette di testo su un grafico geografico con displayMode: text.

Dati e opzioni
  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>

Colorare il grafico

Esistono diverse opzioni per personalizzare i colori dei grafici geografici:

  • colorAxis: lo spettro di colori da utilizzare per le regioni nella tabella dati.
  • backgroundColor: il colore di sfondo del grafico.
  • datalessRegionColor: il colore da assegnare alle regioni senza dati associati.
  • defaultColor: il colore da assegnare alle regioni nella tabella dati per le quali il valore è null o non specificato.

L'opzione colorAxis è quella importante: specifica la gamma di colori per i valori dei dati. Nell'array colorAxis, il primo elemento è il colore assegnato al valore più piccolo nel set di dati, mentre l'ultimo è il colore assegnato al valore più grande nel set di dati. Se specifichi più di due colori, verrà eseguita l'interpolazione tra loro.

Nel grafico che segue, utilizzeremo tutte e quattro le opzioni. colorAxis viene utilizzato per visualizzare l'Africa con i colori della bandiera panafricana, utilizzando le latitudini dei paesi: dal rosso nel nord, attraverso il nero, al verde nel sud. L'opzione backgroundColor viene utilizzata per colorare lo sfondo di un azzurro, datalessRegionColor per colorare di rosa chiaro i paesi non africani e defaultColor per Madagascar.
Opzioni
        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };
Pagina 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>

Caricamento in corso...

Il nome del pacchetto google.charts.load è "geochart". Tieni presente che non devi copiare le nostre mapsApiKey, perché non funzionerà. Se il tuo grafico non richiede geocodifica o utilizza codici non standard per identificare le località, non hai bisogno di un mapsApiKey. Per maggiori dettagli, vedi Caricare le impostazioni. 

  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'
  });

Il nome della classe di visualizzazione dei grafici geografici è google.visualization.GeoChart. 

  var visualization = new google.visualization.GeoChart(container);

Formato dei dati

Il formato della tabella di dati varia a seconda della modalità di visualizzazione utilizzata: regions, markers o text.

Formato della modalità Regioni

La posizione viene inserita in una colonna più una colonna facoltativa come descritto di seguito:

  1. Località regione [Stringa, obbligatorio] - Una regione da evidenziare. Sono accettati tutti i seguenti formati. Puoi utilizzare formati diversi in righe distinte:
    • Il nome di un paese sotto forma di stringa (ad esempio "Inghilterra") oppure un codice ISO-3166-1 alpha-2 in maiuscolo o il relativo equivalente in inglese (ad esempio, "GB" o "Regno Unito").
    • Un nome con codice regione ISO-3166-2 in maiuscolo o l'equivalente testuale in inglese (ad esempio, "US-NJ" o "New Jersey").
    • Un codice dell'area metropolitana. Si tratta di codici metropolitani a tre cifre utilizzati per designare varie regioni. Sono supportati solo i codici USA. Tieni presente che non corrispondono ai prefissi telefonici.
    • Qualsiasi valore supportato dalla proprietà region.
  2. Colore regione [Numero, facoltativo] - Una colonna numerica facoltativa utilizzata per assegnare un colore a questa regione, in base alla scala specificata nella proprietà colorAxis.colors. Se questa colonna non è presente, tutte le regioni saranno dello stesso colore. Se la colonna è presente, non sono consentiti valori nulli. I valori vengono scalati in base ai valori sizeAxis.minValue/sizeAxis.maxValue o ai valori specificati nella proprietà colorAxis.values, se forniti.

Formato della modalità indicatori

Il numero di colonne varia a seconda del formato dell'indicatore utilizzato e di altre colonne facoltative.

  • Posizione indicatore [obbligatorio]
    La prima colonna è un indirizzo di stringa specifico (ad esempio, "1600 Pennsylvania Ave").

    OPPURE

    Le prime due colonne sono numeriche, dove la prima colonna indica la latitudine e la seconda colonna la longitudine.

    Nota: anche se consigliamo di utilizzare i codici ISO 3166 per la modalità "regioni", la modalità "indicatori" funziona al meglio con nomi più lunghi per le regioni (come Germania, Panama e così via). Questo perché i grafici geografici, in modalità "indicatori", utilizzano Google Maps per la geocodifica delle posizioni (convertindo una posizione di stringa in latitudine e longitudine). Di conseguenza, le località ambigue non vengono geocodificate come ci si aspetta, ad esempio "DE" sta per Germania o Delaware o "PA" sta per Panama o Pennsylvania.

  • Colore indicatore [Numero, facoltativo] La colonna successiva è una colonna numerica facoltativa utilizzata per assegnare un colore a questo indicatore in base alla scala specificata nella proprietà colorAxis.colors. Se questa colonna non è presente, tutti gli indicatori saranno dello stesso colore. Se la colonna è presente, non sono consentiti valori nulli. I valori vengono scalati l'uno rispetto all'altro o assolutamente in base ai valori specificati nella proprietà colorAxis.values.
  • Dimensione indicatore [Numero, facoltativo] Una colonna numerica facoltativa utilizzata per assegnare le dimensioni dell'indicatore in relazione alle altre dimensioni dell'indicatore. Se questa colonna non è presente, verrà utilizzato il valore della colonna precedente (o la dimensione predefinita, se non viene fornita anche una colonna di colore). Se la colonna è presente, non sono consentiti valori nulli.

Formato modalità di testo

L'etichetta viene inserita nella prima colonna, più una colonna facoltativa:

  • Etichetta di testo [String, Obbligatoria] Un indirizzo stringa specifico (ad esempio, "1600 Pennsylvania Ave").
  • Dimensione del testo [Numero, facoltativo] La seconda colonna è una colonna numerica facoltativa utilizzata per assegnare la dimensione dell'etichetta. Se questa colonna non è presente, tutte le etichette avranno la stessa dimensione.

Opzioni di configurazione

Nome
backgroundColor

Il colore di sfondo per l'area principale del grafico. Può essere una semplice stringa di colore HTML, ad esempio 'red' o '#00cc00', oppure un oggetto con le seguenti proprietà.

Tipo: stringa o oggetto
Predefinito:bianco
backgroundColor.fill

Il colore di riempimento del grafico, come stringa di colore HTML.

Tipo:stringa
Predefinito:bianco
backgroundColor.stroke

Il colore del bordo del grafico, come stringa di colore HTML.

Tipo:stringa
Predefinito: "#666"
backgroundColor.strokeWidth

Lo spessore del bordo, in pixel.

Tipo:numero
Predefinito:0
colorAxis

Un oggetto che specifica una mappatura tra i valori e i colori delle colonne di colori o una scala di gradienti. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Tipo:oggetto
Predefinito:null
colorAxis.minValue

Se presente, specifica un valore minimo per i dati del colore del grafico. I valori dei dati relativi ai colori di questo valore e inferiori verranno visualizzati come primo colore nell'intervallo colorAxis.colors.

Tipo:numero
Predefinito:valore minimo della colonna del colore nei dati del grafico
colorAxis.maxValue

Se presente, specifica un valore massimo per i dati del colore del grafico. I valori dei dati sui colori di questo valore e superiori verranno visualizzati come ultimo colore nell'intervallo colorAxis.colors.

Tipo:numero
Predefinito:valore massimo della colonna del colore nei dati del grafico
colorAxis.values

Se presente, controlla in che modo i valori vengono associati ai colori. Ogni valore è associato al colore corrispondente nell'array colorAxis.colors. Questi valori si applicano ai dati relativi ai colori del grafico. La colorazione viene eseguita in base a un gradiente dei valori specificati qui. Non specificare un valore per questa opzione equivale a specificare [minValue, maxValue].

Tipo: array di numeri
Predefinito:null
colorAxis.colors

Colori da assegnare ai valori nella visualizzazione. Un array di stringhe, in cui ogni elemento è una stringa di colore HTML, ad esempio: colorAxis: {colors:['red','#004411']}. Devi avere almeno due valori. Il gradiente includerà tutti i valori, oltre ai valori intermedi calcolati, con il primo colore come valore più piccolo e l'ultimo colore come il più alto.

Tipo: array di stringhe di colore
Predefinito:null
datalessRegionColor

Colore da assegnare alle regioni senza dati associati.

Tipo:stringa
Predefinito: "#F5F5F5"
defaultColor

Il colore da utilizzare per i punti dati in un grafico geografico quando si trova la posizione (ad es. 'US' ) è presente, ma il valore è null o non specificato. È diverso da datalessRegionColor, che è il colore utilizzato quando mancano dati.

Tipo:stringa
Predefinito: "#267114"
displayMode

Che tipo di grafico geografico si tratta. Il formato DataTable deve corrispondere al valore specificato. Sono supportati i seguenti valori:

  • "auto": scegli in base al formato della tabella di dati.
  • "regioni": consente di colorare le regioni sul grafico geografico.
  • "Indicatori" - Posiziona gli indicatori sulle regioni.
  • 'text' - Etichetta le regioni con il testo della tabella di dati.
Tipo:stringa
Predefinito: "automatico"
dominio

Mostra il grafico geografico come se fosse fornito da questa regione. Ad esempio, se imposti domain su 'IN', il Kashmir verrà visualizzato come appartenente all'India anziché come territorio conteso.

Tipo:stringa
Predefinito:null
enableRegionInteractivity

Se impostato su true, attiva l'interattività delle regioni, compresi lo stato attivo e l'elaborazione della descrizione comando al passaggio del mouse, nonché la selezione e l'attivazione della regione degli eventi regionClick e select al clic del mouse.

Il valore predefinito è true in modalità regione e false in modalità indicatore.

Tipo: booleano
Predefinito:automatico
forceIFrame

Disegna il grafico all'interno di un frame in linea. Tieni presente che in IE8 questa opzione viene ignorata; tutti i grafici di IE8 vengono tracciati in i-frame.

Tipo: booleano
Predefinito:false
geochartVersion

La versione dei dati di confine del grafico geografico. Sono disponibili le versioni 10 e 11.

Tipo:numero
Predefinito:10
altezza

Altezza della visualizzazione, in pixel. L'altezza predefinita è 347 pixel, a meno che non sia specificata l'opzione width e che keepAspectRatio sia impostata su true, in questo caso l'altezza viene calcolata di conseguenza.

Tipo:numero
Predefinita: automatica
keepAspectRatio

Se il valore è vero, il grafico geografico verrà disegnato con le dimensioni massime che possono rientrare nell'area del grafico con le proporzioni naturali. Se viene specificata solo una delle opzioni width e height, l'altra verrà calcolata in base alle proporzioni.

Se il valore è false, il grafico geografico verrà ampliato fino alla dimensione esatta del grafico, come specificato dalle opzioni width e height.

Tipo: booleano
Predefinito:true
leggenda

Un oggetto con membri per configurare vari aspetti della legenda o "nessuno", se non deve essere visualizzata alcuna legenda. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: 

 {textStyle: {color: 'blue', fontSize: 16}}
Tipo:Oggetto / "nessuno"
Predefinito:null
legend.numberFormat

Una stringa di formato per le etichette numeriche. Questo è un sottoinsieme del set di pattern di ICU . Ad esempio, {numberFormat:'.##'} mostrerà i valori "10.66", "10.6" e "10.0" per i valori 10.666, 10.6 e 10.

Tipo:stringa
Predefinita: automatica
legend.textStyle

Un oggetto che specifica lo stile di testo della legenda. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color può essere qualsiasi stringa di colore HTML, ad esempio 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo:oggetto
Predefinita: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
regione

L'area da visualizzare nel grafico geografico. Verranno visualizzate anche le aree circostanti. Può essere:

  • 'mondo' - Un grafico geografico del mondo intero.
  • Un continente o un subcontinente, specificato dal relativo codice di 3 cifre, ad esempio "011" per l'Africa occidentale.
  • Un paese, specificato dal relativo codice ISO 3166-1 alpha-2, ad esempio "AU" per l'Australia.
  • Uno stato negli Stati Uniti, specificato dal codice ISO 3166-2:US, ad esempio "US-AL" per l'Alabama. Tieni presente che l'opzione resolution deve essere impostata su "province" o "metros".
Tipo:stringa
Predefinito: 'world'
magnifyingGlass

Un oggetto con membri per configurare vari aspetti della lente d'ingrandimento. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: 

{enable: true, zoomFactor: 7.5}
Tipo:oggetto
Predefinita: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

Se il valore è vero, quando l'utente si sofferma sopra un indicatore caotico, si aprirà una lente d'ingrandimento.

Nota: questa funzionalità non è supportata nei browser che non supportano SVG, ad esempio Internet Explorer versione 8 o precedente.

Tipo: booleano
Predefinito:true
magnifyingGlass.zoomFactor

Il fattore di zoom della lente d'ingrandimento. Può essere qualsiasi numero maggiore di 0.

Tipo:numero
Predefinita: 5.0
markerOpacity

L'opacità degli indicatori, dove 0,0 è completamente trasparente e 1,0 è completamente opaco.

Tipo:numero, 0,0-1,0
Predefinita: 1,0
regioncoderVersion

La versione dei dati del codice regione. Sono disponibili le versioni 0 e 1.

Tipo:numero
Predefinita: 0
risoluzione

La risoluzione dei bordi del geografico. Scegli uno dei seguenti valori:

  • "countries": supportato per tutte le regioni, ad eccezione delle regioni degli Stati Uniti.
  • "province": supportato solo per regioni di paesi e stati degli Stati Uniti. Non supportata per tutti i paesi; testa un paese per vedere se questa opzione è supportata.
  • "metros": supportato solo per le regioni degli Stati Uniti e degli stati degli Stati Uniti.
Tipo:stringa
Predefinito: "countries"
sizeAxis

Un oggetto con membri per configurare la modalità di associazione dei valori alle dimensioni delle bolle. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: 

 {minValue: 0,  maxSize: 20}
Tipo:oggetto
Predefinito:null
sizeAxis.maxSize

Raggio massimo della bolla più grande possibile, in pixel.

Tipo:numero
Predefinito:12
sizeAxis.maxValue

Il valore della dimensione (come visualizzato nei dati del grafico) da mappare a sizeAxis.maxSize. I valori più grandi verranno ritagliati in base a questo valore.

Tipo:numero
Predefinito:valore massimo della colonna della dimensione nei dati del grafico
sizeAxis.minSize

Raggio minimo della bolla più piccola possibile, in pixel.

Tipo:numero
Predefinito:3
sizeAxis.minValue

Il valore della dimensione (come visualizzato nei dati del grafico) da mappare a sizeAxis.minSize. I valori più piccoli verranno ritagliati in base a questo valore.

Tipo:numero
Predefinito:valore minimo della colonna delle dimensioni nei dati del grafico
Descrizione comando

Un oggetto con membri per configurare vari elementi della descrizione comando. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo:oggetto
Predefinito:null
tooltip.textStyle

Un oggetto che specifica lo stile di testo della descrizione comando. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color può essere qualsiasi stringa di colore HTML, ad esempio 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo:oggetto
Predefinita: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

L'interazione dell'utente che determina la visualizzazione della descrizione comando:

  • "focus" - La descrizione comando viene visualizzata quando l'utente passa il mouse sopra l'elemento.
  • "nessuno" - La descrizione comando non verrà visualizzata.
  • "selection" - La descrizione comando verrà visualizzata quando l'utente selezionerà l'elemento.
Tipo:stringa
Predefinito: "focus"
larghezza

Larghezza della visualizzazione, in pixel. La larghezza predefinita è 556 pixel, a meno che non venga specificata l'opzione height e che keepAspectRatio sia impostato su true - in questo caso la larghezza viene calcolata di conseguenza.

Tipo:numero
Predefinita: automatica

 

Gerarchia e codici dei continenti

Puoi visualizzare i grafici geografici di continenti/subcontinenti impostando l'opzione region su uno dei seguenti codici di tre cifre. I codici e la gerarchia si basano, con alcune eccezioni, su quelli sviluppati e gestiti dalla Divisione Statistica delle Nazioni Unite .

Continente Subcontinente Paesi
002 - Africa 015 - Nord Africa DZ, EG, EH, LY, MA, SD, SS, TN
011 - Africa occidentale BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, MR2}, 2 MR2}, 2 MR2},21}, {44SHSLSN
017 - Medio Africa AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 - Africa orientale BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, R2} R.RWSCSOTZUG
018 - Africa meridionale BW, LS, NA, SZ, ZA
150 - Europa 154 - Europa settentrionale GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, IS LV
155 - Europa occidentale AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL
151 - Europa orientale BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA
039 - Europa meridionale AD, AL, BA, ES, GI, GR, HR, IT, ME, MK, MT, 22}RS
019 - Americhe 021 - Nord America BM, CA, GL, PM, US
029 - Caraibi AG, AI, AN, AW, BB, BL, BS, CU, DM, DO, GD, GPLCMS
013 - America Centrale BZ, CR, GT, HN, MX, NI, PA, SV
005 - America del Sud AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY , , SRVE
142 - Asia 143 - Asia centrale TM, TJ, KG, KZ, UZ
030 - Asia orientale CN, HK, JP, KP, KR, MN, MO, TW
034 - Asia meridionale AF, BD, BT, IN, IR, LK, MV, NP, PK
035 - Asia sudorientale BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL NN2}VN
145 - Asia occidentale AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW, {20OMLB {20OMLB,
009 - Oceania 053 - Australia e Nuova Zelanda AU, NF, NZ
054 - Melanesia FJ, NC, PG, SB, VU
057 - Micronesia FM, GU, KI, MH, MP, NR, PW
061 - Polinesia AS, CK, NU, PF, PN, TK, TO, TV, WF, WS

Metodi

Metodo
clearChart()

Cancella il grafico e rilascia tutte le risorse allocate.

Tipo di reso: nessuno
draw(data, options)

Disegna il grafico. Il grafico accetta ulteriori chiamate di metodo solo dopo che è stato attivato l'evento ready. Extended description.

Tipo di reso: nessuno
getImageURI()

Restituisce il grafico serializzato come URI immagine.

Viene chiamato dopo che il grafico è stato disegnato.

Consulta la sezione Stampa di grafici PNG.

Tipo di ritorno:stringa
getSelection()

Restituisce un array delle entità del grafico selezionate. Le entità selezionabili sono regioni in cui è assegnato un valore. Per questo grafico, è possibile selezionare una sola entità alla volta. Extended description

Tipo restituito: array di elementi di selezione
setSelection()

Seleziona le entità del grafico specificate. Annulla la selezione precedente. Le entità selezionabili sono regioni in cui è assegnato un valore. Per questo grafico è possibile selezionare una sola entità alla volta. Extended description

Tipo di reso: nessuno

Eventi

Nome
error

Attivato quando si verifica un errore durante il tentativo di rendering del grafico.

Proprietà: id, messaggio
ready

Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo draw e richiamarli solo dopo l'attivazione dell'evento.

Proprietà:nessuna
regionClick

Richiamato quando si fa clic su una regione. Questo valore non verrà mostrato per il paese specifico assegnato nell'opzione "regione" (se è stato elencato un paese specifico).

Proprietà: un oggetto con una singola proprietà, region, ovvero una stringa in formato ISO-3166 che descrive la regione selezionata.
select

Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama getSelection().

Proprietà:nessuna

Norme sui dati

Le località vengono geocodificate da Google Maps. Tutti i dati che non richiedono la geocodifica non vengono inviati ad alcun server. Per ulteriori informazioni sulle norme relative ai dati, consulta i Termini di servizio di Google Maps.