Ta strona została przetłumaczona przez Cloud Translation API.

Wizualizacja: Geomapa

Przegląd
Przykłady
Wczytuję
Format danych
Opcje konfiguracji
Metody
Zdarzenia
Zasady dotyczące danych
Uwagi

Omówienie

Mapa geograficzna to mapa kraju, kontynentu lub regionu z przypisanymi kolorami i wartościami do konkretnych regionów. Wartości są wyświetlane jako skala kolorów, a w regionach możesz określić opcjonalny tekst najedź kursorem. Mapa jest renderowana w przeglądarce za pomocą wbudowanego odtwarzacza Flash. Pamiętaj, że mapy nie można przewijać ani przeciągać, ale można ją powiększać.

Przykłady

Mamy 2 przykłady: jeden ze stylem wyświetlania regionów i jeden ze stylem wyświetlania znaczników.

Przykład regionów

Styl „Regiony” wypełnia całe regiony (zwykle kraje) kolorami odpowiadającymi przypisanym przez Ciebie wartościom. Określ styl regionów, przypisując do niego kod options['dataMode'] = 'regions'.

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

Przykład znaczników

Styl „Znaczniki” pokazuje okrąg, rozmiar i kolor do wskazywania wartości w określonych regionach.

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

Wczytuję

Nazwa pakietu google.charts.load to "geomap"

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

Nazwa klasy wizualizacji geograficznej to google.visualization.GeoMap

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

Format danych

Obsługiwane są 2 formaty adresów, z których każdy obsługuje inną liczbę kolumn, a także różne typy danych w każdej kolumnie. Wszystkie adresy w tabeli muszą korzystać z jednego lub drugiego. Nie można mieszać typów.

Format 1. Szerokość i długość geograficzna. Ten format działa tylko wtedy, gdy opcja dataMode jest „znacznikami”. Jeśli używasz tego formatu, nie musisz uwzględniać kodu JavaScript Map Google. Lokalizację wpisz w 2 kolumnach oraz 2 opcjonalnych kolumnach:
1. [Liczba, Wymagane] Szerokość geograficzna. Wartości dodatnie to północ, a południe ujemne.
2. [Liczba, Wymagane] Długość geograficzna. Wartości dodatnie to wschód, a ujemne – w kierunku zachodnim.
3. [Liczba, Opcjonalnie] Wartość liczbowa wyświetlana po najechaniu przez użytkownika kursorem myszy na ten region. Jeśli używana jest kolumna 4, jest ona wymagana.
4. [Ciąg, opcjonalny] Dodatkowy tekst ciągu znaków wyświetlany, gdy użytkownik najedzie kursorem na ten region.
Format 2: adres, nazwa kraju, lokalizacje regionów lub kody obszarów miejskich USA. Ten format działa z opcją dataMode ustawioną na „markers” lub „regions”. Lokalizacja jest wpisana w jednej kolumnie i 2 opcjonalnych kolumnach:
1. [Ciąg, wymagany] Lokalizacja na mapie. Akceptujemy te formaty:
  - Konkretny adres (np. „Rynek Główny 12”.
  - Nazwa kraju w formie ciągu znaków (np. „Anglia”) lub kod w formacie ISO-3166 albo jego odpowiednik w języku angielskim (np. „GB” lub „Wielka Brytania”).
  - Nazwa regionu z użyciem wielkich liter w normie ISO-3166-2 lub jej odpowiednik w języku angielskim (np. „US-NJ” lub „New Jersey”). Uwaga: regiony można określić tylko wtedy, gdy opcja dataMode jest ustawiona na „regions”.
  - Obszar miejski. Są to 3-cyfrowe kody miejskie używane do oznaczania różnych regionów. Obsługiwane są tylko kody amerykańskie. Pamiętaj, że to nie to te same numery, co numery kierunkowe telefonów.
2. [Liczba, Opcjonalnie] Wartość liczbowa wyświetlana po najechaniu przez użytkownika kursorem myszy na ten region. Jeśli używana jest kolumna 3, jest ona wymagana.
3. [Ciąg, opcjonalny] Dodatkowy tekst ciągu znaków wyświetlany, gdy użytkownik najedzie kursorem na ten region.

Uwaga: mapa może zawierać maksymalnie 400 wpisów. Jeśli tabela DataTable lub DataView zawiera więcej niż 400 wierszy, zobaczysz tylko 400. Najszybsze tryby to dataMode='regions' z lokalizacjami określonymi jako kody ISO oraz dataMode='markers' o szerokości i długości geograficznej. Tryb najwolniejszy to dataMode='markers' z adresem ciągu znaków.

Ważne: DataTable musi zawierać wszystkie opcjonalne kolumny poprzedzające dowolną kolumnę, której chcesz użyć. Jeśli na przykład chcesz określić tabelę i długość geograficzną i chcesz użyć tylko kolumn 1, 2 i 4, DataTable musi jeszcze zdefiniować kolumnę 3 (nie musisz dodawać do niej żadnych wartości):

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!");

Opcje konfiguracji

Nazwa	Typ	Domyślna	Opis
`region`	tekst	„świecie”	Obszar do wyświetlenia na mapie. Pojawią się też obszary otaczające. Może to być kod kraju (w dużym formacie ISO 3166) lub jeden z tych ciągów znaków: `world` – (cały świat) `us_metro` – (Stany Zjednoczone, obszary miejskie) `005` – (Ameryka Południowa) `013` – (Ameryka Środkowa) `021` – (Ameryka Północna) `002` – (cała Afryka) `017` – (Afryka Środkowa) `015` – (Afryka Północna) `018` – (Republika Południowej Afryki) `030` – Azja Wschodnia `034` – (Azja Południowa) `035` – (Azja i Pacyfik) `009` – (Oceania) `145` – (Bliski Wschód) `143` – (Azja Środkowa) `151` – (Azja Północna) `154` – (Europa Północna) `155` – Europa Zachodnia `039` – (Europa Południowa) Geomapa nie umożliwia przewijania ani przeciągania, a jedynie ograniczone powiększenie. Podstawowe pomniejszenie możesz włączyć, ustawiając właściwość `showZoomOut`.
`dataMode`	tekst	„regiony”	Jak wyświetlać wartości na mapie. Obsługiwane są 2 wartości: `regions` – stosuje kolor w całym regionie, używając odpowiedniego koloru. Tej opcji nie można używać z adresami szerokości i długości geograficznej. Zobacz przykład regionów. `markers` – wyświetla kropkę nad regionem, a kolor i rozmiar wskazują jej wartość. Zobacz przykład z znacznikami.
`width`	tekst	'556px'	Szerokość wizualizacji. Jeśli nie podano żadnej jednostki, domyślną jednostką są piksele.
`height`	tekst	'347px'	Wysokość wizualizacji. Jeśli nie podano żadnej jednostki, domyślną jednostką są piksele.
`colors`	Tablica liczb RGB w formacie 0xRRGGBB	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	Gradient koloru, który można przypisać do wartości w wizualizacji. Musisz mieć co najmniej 2 wartości. gradient będzie zawierał wszystkie wartości oraz obliczone wartości pośrednie, których najjaśniejszy kolor ma najmniejszą wartość, a najciemniejszy – najwyższy.
`showLegend`	wartość logiczna	prawda	Jeśli ma wartość true (prawda), wyświetla legendę na mapie.
`showZoomOut`	wartość logiczna	fałsz	Jeśli ma wartość true (prawda), wyświetla przycisk z etykietą określoną przez właściwość `zoomOutLabel`. Po kliknięciu tego przycisku nic się nie dzieje po kliknięciu, z wyjątkiem wywołania zdarzenia `zoomOut`. Aby obsługiwać powiększenie, wychwyć to zdarzenie i zmień opcję `region`. Możesz określić właściwość `showZoomOut` tylko wtedy, gdy opcja `region` jest mniejsza niż widok świata. Jednym ze sposobów na włączenie funkcji powiększenia jest wykrycie zdarzenia `regionClick`, zmianę właściwości `region` na odpowiedni region i ponowne załadowanie mapy.
`zoomOutLabel`	tekst	Pomniejsz	Etykieta przycisku powiększenia.

Metody

Metoda	Typ zwracanej wartości	Opis
`draw(data, options)`	Brak	Rysuje mapę. Możliwość powrotu przed zakończeniem rysowania (zobacz zdarzenie `drawingDone()`).
`getSelection()`	Tablica elementów wyboru	Standardowa implementacja `getSelection()`. Wybrane elementy to wiersze. Ta metoda działa tylko wtedy, gdy opcja `dataMode` to „regiony”. Możesz wybrać tylko region z przypisaną wartością.
`setSelection(selection)`	Brak	Standardowa implementacja `setSelection()`. Traktuje zaznaczenie jako zaznaczenie wierszy i obsługuje wiele opcji wyboru wiersza. Można wybrać tylko regiony z przypisanymi wartościami.

Zdarzenia

Nazwa	Opis	Usługi
`error`	Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd.	id, message,
`select`	Uruchamiane, gdy użytkownik kliknie region z przypisaną wartością. Aby dowiedzieć się, co zostało wybrane, wywołaj metodę `getSelection()`. Opcja dostępna tylko wtedy, gdy opcja `dataMode` jest ustawiona na „regiony”. Uwaga: z powodu pewnych ograniczeń zdarzenie `select` nie jest przesyłane, gdy otwierasz stronę w przeglądarce jako plik (np. „file://”) zamiast z serwera (np. „http://www”).	Brak
`regionClick`	Wywoływane po kliknięciu regionu. Działa zarówno dla „regionów”, jak i „znaczników” `dataMode`. Jednak w trybie znacznika nie będą one wyświetlane w przypadku kraju określonego w opcji „region” (jeśli dany kraj jest na liście). Uwaga: z powodu pewnych ograniczeń zdarzenie `regionClick` nie jest przesyłane, gdy otwierasz stronę w przeglądarce jako plik (np. „file://”) zamiast z serwera (np. „http://www”).	Obiekt z jedną właściwością (`region`) będący ciągiem w formacie ISO-3166 opisującym region, który został kliknięty.
`zoomOut`	Wywoływane po kliknięciu przycisku pomniejszenia. Aby obsługiwać powiększenie, wychwyć to zdarzenie i zmień opcję `region`. Uwaga: z powodu pewnych ograniczeń zdarzenie `zoomOut` nie jest przesyłane, gdy otwierasz stronę w przeglądarce jako plik (np. „file://”) zamiast z serwera (np. „http://www”).	Brak
`drawingDone`	Wywoływana po zakończeniu rysowania.	Brak

Zasady dotyczące danych

Lokalizacje są geokodowane przez Mapy Google. Dane, które nie wymagają geokodowania, nie są wysyłane na żaden serwer. Aby dowiedzieć się więcej o zasadach dotyczących danych, zapoznaj się z Warunkami korzystania z usługi Mapy Google.

Uwagi

Ze względu na ustawienia zabezpieczeń Flash ta wersja (oraz wszystkie wizualizacje oparte na technologii Flash) może nie działać prawidłowo w przypadku uzyskania dostępu z lokalizacji pliku w przeglądarce (np. file:///c:/webhost/myhost/myviz.html), a nie z adresu URL serwera WWW (np. http://www.myhost.com/myviz.html). Jest to zwykle problem testowy. Możesz rozwiązać ten problem zgodnie z opisem na stronie Macromedia.