Questa pagina è stata tradotta dall'API Cloud Translation.

Visualizzazione: mappa geografica

Panoramica
Esempi
Caricamento in corso…
Formato dei dati
Opzioni di configurazione
Metodi
Eventi
Norme sui dati
Note

Panoramica

Una mappa geografica è una mappa di un paese, un continente o una mappa di una regione, con colori e valori assegnati a regioni specifiche. I valori vengono visualizzati come scala di colori e puoi specificare un testo di passaggio facoltativo per le regioni. La mappa viene visualizzata nel browser utilizzando un player Flash incorporato. Tieni presente che la mappa non è scorrevole o trascinabile, ma può essere configurata in modo da consentire lo zoom.

Esempi

Qui abbiamo due esempi: uno che utilizza lo stile di visualizzazione delle regioni e un altro che utilizza lo stile di visualizzazione degli indicatori.

Esempio per area geografica

Lo stile delle regioni riempie intere regioni (in genere paesi) con i colori corrispondenti ai valori che assegni. Specifica lo stile delle regioni assegnando options['dataMode'] = 'regions' nel codice.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Esempio di indicatori

Lo stile "indicatori" mostra un cerchio, una dimensione e un colore per indicare un valore, sopra le regioni specificate.

<html>
<head>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script type='text/javascript'>
   google.charts.load('current', {'packages': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

Caricamento

Il nome del pacchetto google.charts.load è "geomap"

  google.charts.load('current', {'packages': ['geomap']});

Il nome della classe di visualizzazione della mappa geografica è google.visualization.GeoMap

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

Formato dei dati

Sono supportati due formati di indirizzo, ognuno dei quali supporta un numero diverso di colonne e tipi di dati diversi per ogni colonna. Tutti gli indirizzi nella tabella devono utilizzare uno dei due; non è possibile utilizzare una combinazione di tipi diversi.

Formato 1: latitudine/longitudine. Questo formato funziona solo quando l'opzione dataMode è "indicatori". Se viene utilizzato questo formato, non è necessario includere il JavaScript di Google Maps. La località viene inserita in due colonne più due colonne facoltative:
1. [Numero, obbligatorio] Una latitudine. I numeri positivi sono quelli a nord, quelli negativi a sud.
2. [Numero, obbligatorio] Una longitudine. I numeri positivi sono quelli a est, quelli a ovest.
3. [Numero, facoltativo] Un valore numerico visualizzato quando l'utente passa il mouse sopra questa area geografica. Se viene utilizzata la colonna 4, questa è obbligatoria.
4. [Stringa, facoltativo] Testo della stringa aggiuntivo visualizzato quando l'utente passa il mouse sopra questa area geografica.
Formato 2: indirizzo, nome del paese, località del nome dell'area geografica o codici area metropolitana degli Stati Uniti. Questo formato funziona con l'opzione dataMode impostata su "Indicatori" o "Regioni". La località viene inserita in una colonna, oltre a due colonne facoltative:
1. [Stringa, obbligatoria] Una posizione sulla mappa. Sono accettati i seguenti formati:
  - Un indirizzo specifico, ad esempio "Via Verdi 160".
  - Il nome del paese come stringa (ad esempio, "Inghilterra") o come codice ISO-3166 maiuscolo o equivalente in testo inglese (ad esempio, "GB" o "Regno Unito").
  - Il nome di un codice regione ISO-3166-2 in maiuscolo o il testo equivalente in inglese (ad esempio, "US-NJ" o "New Jersey"). Nota: le regioni possono essere specificate solo quando l'opzione dataMode è impostata su "regioni".
  - Un prefisso metropolitano. Si tratta di codici area metropolitana di tre cifre utilizzati per designare diverse aree geografiche; sono supportati solo i codici degli Stati Uniti. Tieni presente che non corrispondono ai prefissi telefonici.
2. [Numero, facoltativo] Un valore numerico visualizzato quando l'utente passa il mouse sopra questa area geografica. Se viene utilizzata la colonna 3, questa è obbligatoria.
3. [Stringa, facoltativo] Testo della stringa aggiuntivo visualizzato quando l'utente passa il mouse sopra questa area geografica.

Nota: una mappa può visualizzare al massimo 400 voci; se la tua DataTable o DataView contiene più di 400 righe, verranno mostrate solo le prime 400. Le modalità più veloci sono dataMode='regions' con località specificate come codici ISO e dataMode='markers' con entità lat/long. La modalità più lenta è dataMode='markers' con un indirizzo stringa.

Importante: la colonna DataTable deve includere tutte le colonne facoltative che precedono qualsiasi colonna che vuoi utilizzare. Ad esempio, se vuoi specificare una tabella lat/long e vuoi utilizzare solo le colonne 1, 2 e 4, DataTable deve comunque definire la colonna 3 (anche se non è necessario aggiungervi valori):

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

Opzioni di configurazione

Nome	Tipo	Predefinito	Descrizione
`region`	string	"mondo"	L'area da visualizzare sulla mappa. Vengono visualizzate anche aree circostanti. Può essere un codice paese (in formato ISO-3166 maiuscolo) o una delle seguenti stringhe: `world` - (tutto il mondo) `us_metro` - (Stati Uniti, aree metropolitane) `005` - (America del Sud) `013` - (America Centrale) `021` - (Nord America) `002` - (Tutta l'Africa) `017` - (Africa centrale) `015` - (Africa settentrionale) `018` - (Sudafrica) `030` - (Asia orientale) `034` - (Asia meridionale) `035` (Asia/Pacifico) `009` - (Oceania) `145` - (Medio Oriente) `143` - (Asia centrale) `151` - (Asia settentrionale) `154` - (Europa settentrionale) `155` - (Europa occidentale) `039` - (Europa meridionale) La mappa geografica non consente il comportamento di scorrimento o trascinamento e solo il comportamento di zoom limitato. Puoi ridurre lo zoom di base impostando la proprietà `showZoomOut`.
`dataMode`	string	"regioni"	Come visualizzare i valori sulla mappa. Sono supportati due valori: `regions`: colora un'intera area geografica con il colore appropriato. Questa opzione non può essere utilizzata con gli indirizzi di latitudine/longitudine. Consulta la sezione Esempio di aree geografiche. `markers`: visualizza un punto sopra un'area geografica, con il colore e la dimensione che indicano il valore. Vedi Esempi di indicatori.
`width`	string	"556 px"	La larghezza della visualizzazione. Se non vengono fornite unità, l'unità predefinita è i pixel.
`height`	string	"347 px"	Altezza della visualizzazione. Se non vengono fornite unità, l'unità predefinita è i pixel.
`colors`	Array di numeri RGB nel formato 0xRRGGBB	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	Gradiente di colore da assegnare ai valori nella visualizzazione. Devi avere almeno due valori; il gradiente includerà tutti i tuoi valori, più i valori intermedi calcolati, con il colore più chiaro dal valore più piccolo e quello più scuro dal valore più alto.
`showLegend`	boolean	true	Se true, visualizza una legenda per la mappa.
`showZoomOut`	boolean	false	Se true, visualizza un pulsante con l'etichetta specificata dalla proprietà `zoomOutLabel`. Tieni presente che questo pulsante non esegue alcuna azione quando viene fatto clic, ad eccezione dell'evento `zoomOut`. Per gestire lo zoom, individua questo evento e modifica l'opzione `region`. Puoi specificare `showZoomOut` solo se l'opzione `region` è più piccola della visualizzazione globale. Un modo per abilitare il comportamento dello zoom è ascoltare l'evento `regionClick`, modificare la proprietà `region` nella regione appropriata e ricaricare la mappa.
`zoomOutLabel`	string	Diminuisci lo zoom	Etichetta per il pulsante Zoom.

Metodi

Metodo	Tipo restituito	Descrizione
`draw(data, options)`	Nessuno	Disegna la mappa. L'elemento può tornare prima che il disegno sia completato (vedi l'evento `drawingDone()`).
`getSelection()`	Array di elementi di selezione	Implementazione standard di `getSelection()`. Gli elementi selezionati sono righe. Questo metodo funziona solo quando l'opzione `dataMode` è "regions". Puoi selezionare solo un'area geografica a cui è assegnato un valore.
`setSelection(selection)`	Nessuno	Implementazione `setSelection()` standard. Tratta una selezione come una selezione di riga e supporta più selezioni di righe. Puoi selezionare solo le regioni con valori assegnati.

Eventi

Nome	Descrizione	Proprietà
`error`	Attivato quando si verifica un errore durante il tentativo di rendering del grafico.	ID, messaggio
`select`	Attivato quando l'utente fa clic su una regione a cui è assegnato un valore. Per sapere cosa è stato selezionato, chiama il numero `getSelection()`. Disponibile solo quando l'opzione `dataMode` è impostata su "regioni". Nota: a causa di alcune limitazioni, l'evento `select` non viene generato se accedi alla pagina nel browser come file (ad esempio "file://") anziché da un server (ad es. "http://www").	Nessuno
`regionClick`	Richiamato quando viene fatto clic su un'area geografica. Funziona sia per "regioni" che per "indicatori" `dataMode`. In modalità indicatore, tuttavia, questo non verrà avviato per il paese specifico assegnato nell'opzione "Region" (se è stato elencato un paese specifico). Nota: a causa di alcune limitazioni, l'evento `regionClick` non viene generato se accedi alla pagina nel browser come file (ad es. "file://") anziché da un server (ad es. "http://www").	Un oggetto con una singola proprietà, `region`, ovvero una stringa in formato ISO-3166 che descrive la regione selezionata.
`zoomOut`	Richiamato quando viene fatto clic sul pulsante per diminuire lo zoom. Per gestire lo zoom, individua questo evento e modifica l'opzione `region`. Nota: a causa di alcune limitazioni, l'evento `zoomOut` non viene generato se accedi alla pagina nel browser come file (ad esempio "file://") anziché da un server (ad es. "http://www").	Nessuno
`drawingDone`	Richiamato quando la mappa geografica ha finito di tracciare la mappa.	Nessuno

Norme sui dati

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

Note

A causa delle impostazioni di sicurezza di Flash, questa (e tutte le visualizzazioni basate su Flash) potrebbero non funzionare correttamente quando viene eseguito l'accesso da una posizione del file nel browser (ad esempio file:///c:/webhost/myhost/myviz.html) anziché da un URL del server web (ad es. http://www.myhost.com/myviz.html). In genere si tratta di un problema solo di test. Puoi risolvere questo problema come descritto sul sito web di Macromedia.