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

Wizualizacja: wykres geograficzny

Przegląd
Regionowe wykresy
Wykresy geograficzne Markera
Wykresy tekstowe
Kolorowanie wykresu
Wczytuję
Format danych
Opcje konfiguracji
Metody
Zdarzenia
Zasady dotyczące danych

Omówienie

Geomapa pokazuje mapę kraju, kontynentu lub regionu zidentyfikowanego na 3 sposoby:

Tryb regionu obejmuje kolory wszystkich regionów, np. krajów, prowincji lub stanów.
Tryb Znaczniki używa okręgów do oznaczania regionów, które są skalowane zgodnie z określoną wartością.
W trybie tekstu regiony są oznaczane etykietami z identyfikatorami (np. „Rosja” lub „Azja”).

Wykres geograficzny jest renderowany w przeglądarce za pomocą SVG lub VML. Pamiętaj, że tego wykresu nie można przewijać ani przeciągać. Jest to rysunek liniowy, a nie mapa terenu. Jeśli chcesz skorzystać z którejkolwiek z tych funkcji, rozważ wizualizację mapy.

Regionowe wykresy geograficzne

Styl regions wypełnia całe regiony (zwykle kraje) kolorami odpowiadającymi Twoim wartościom.

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

Wykresy geograficzne Markera

Styl markers renderuje okręgi w określonych lokalizacjach na wykresie geograficznym, o wybranym kolorze i rozmiarze.
Najedź kursorem na nieczytelne znaczniki Rzymu, a otworzy się lupa, aby zobaczyć bardziej szczegółowe znaczniki. (lupa nie jest obsługiwana w Internet Explorerze w wersji 8 i starszych).

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

Wyświetlanie znaczników proporcjonalnych

Standardowo najmniejsza wartość znacznika to najmniejsza wartość znacznika. Jeśli chcesz wyświetlać proporcjonalne wartości znaczników (np. ponieważ są to wartości procentowe), użyj właściwości sizeAxis, aby ustawić wartości minValue i maxValue.

Oto na przykład mapa zachodniej Europy z populacjami i obszarami w 3 krajach: Francji, Niemczech i Polsce. W tym artykule widać liczbę bezwzględną (np. 65 milionów we Francji), ale te obszary stanowią odsetek całości: znacznik Francji jest kolorowy fioletowy, ponieważ jego populacja jest w połowie za granicą, ale jej rozmiar to 50 (z możliwych 100), ponieważ zawiera 50% połączonego obszaru.

W tym kodzie używamy atrybutu sizeAxis, aby określić rozmiar znacznika z zakresu od 0 do 100. Używamy też atrybutu colorAxis z wartościami RGB, aby pokazać populacje różnych kolorów – od pomarańczowego do niebieskiego – które będą działać u użytkowników z niewystarczającą ilością kolorów do oglądania. Na koniec określamy Europę Zachodnią z wartością region wynoszącą 155 zgodnie z sekcją „Hierarchia treści i kody” w dalszej części tego dokumentu.

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

Wykresy tekstowe zawierające tekst

Etykiety tekstowe możesz nakładać na diagramy geograficzne za pomocą displayMode: text.

Dane i opcje

  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['South America', 600],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['Australia', 600]
  ]);

  var options = { displayMode: 'text' };

Pełny kod HTML

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

Kolorowanie wykresu

Dostępne jest kilka opcji dostosowywania kolorów wykresów geograficznych:

colorAxis: spektrum kolorów do użycia w regionach określonych w tabeli danych.
backgroundColor: kolor tła wykresu.
datalessRegionColor: kolor przypisywany do regionów bez powiązanych danych.
defaultColor: kolor przypisywany do regionów w tabeli danych, w których wartość ma wartość null lub nie została określona.

Opcja colorAxis jest ważna, ponieważ określa zakres kolorów Twoich wartości. W tablicy colorAxis pierwszy element to kolor przypisany do najmniejszej wartości w zbiorze danych, a ostatni element to kolor przypisany do największej wartości w zbiorze danych. Jeśli określisz więcej niż 2 kolory, interpolacja między nimi będzie miała miejsce.

Na poniższym wykresie użyjemy wszystkich czterech opcji. colorAxis pozwala wyświetlać Afrykę w kolorach kolorów panafrykańskich, podając szerokość geograficzną krajów: od czerwonej w północy, przez czarną do zielonej na południu. Opcja backgroundColor służy do koloru tła w jasnym niebieskim kolorze, datalessRegionColor w przypadku krajów nieafrykańskich – w kolorze jasnoróżowym i defaultColor w przypadku madagaskaru.

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

Opcje

        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };

Cała strona internetowa

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

Wczytuję

Nazwa pakietu google.charts.load to "geochart". Nie kopiuj naszego obiektu mapsApiKey – nie będzie to działać. Potrzebujesz mapsApiKey, jeśli Twój wykres nie wymaga geokodowania lub używasz niestandardowych kodów. Więcej informacji znajdziesz w sekcji Ustawienia wczytywania.

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

Nazwa klasy wizualizacji wykresu geograficznego to google.visualization.GeoChart.

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

Format danych

Format tabeli danych różni się w zależności od używanego trybu wyświetlania: regions, markers lub text.

Format regionu

Lokalizację wpisz w jednej kolumnie oraz jedną opcjonalną kolumnę w sposób opisany tutaj:

Lokalizacja regionu [ciąg znaków, wymagany] – region do wyróżnienia. Wszystkie formaty są akceptowane. W różnych wierszach możesz używać różnych formatów:
- Nazwa kraju w formie ciągu znaków (np. „Anglia”) lub kod w formacie ISO-3166-1 alfa-2 albo jego odpowiednik w języku angielskim (np. „GB” lub „Wielka Brytania”).
- Nazwa regionu z kodami ISO-3166-2 lub ich odpowiednikiem w języku angielskim (np. „US-NJ” lub „New Jersey”).
- Kod obszaru miejskiego. 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.
- Każda wartość obsługiwana przez właściwość region.
Kolor regionu [liczba, opcjonalny] – opcjonalna kolumna liczbowa używana do przypisywania koloru do tego regionu na podstawie skali określonej we właściwości colorAxis.colors. Jeśli ta kolumna nie jest określona, wszystkie regiony mają ten sam kolor. Jeśli kolumna jest obecna, puste wartości są niedozwolone. Wartości są przeskalowane w stosunku do wartości sizeAxis.minValue/sizeAxis.maxValue lub wartości określonych we właściwości colorAxis.values (jeśli są podane).

Format znaczników

Liczba kolumn zależy od użytego formatu znacznika i innych opcjonalnych kolumn.

Lokalizacja znacznika [wymagana]
Pierwsza kolumna to konkretny adres ciągu znaków (np. „Plac Wolności 1600”).
LUB
Pierwsze 2 kolumny zawierają wartości liczbowe. Pierwsza kolumna zawiera szerokość, a druga – długość.

Uwaga: zalecamy używanie kodów ISO 3166 w trybie „regionów”, ale tryb „znaczników” działa najlepiej z dłuższymi nazwami regionów (np. Niemcy, Panama). Wynika to z tego, że w trybie „znaczniki” geotagi korzystają z Map Google do geokodowania lokalizacji (konwertowanie lokalizacji ciągu znaków na szerokość i długość geograficzną). Może to spowodować niejednoznaczne lokalizacje, takie jak „DE” dla Niemiec lub Delaware, „PA” dla Panamy lub Pensylwanii.
Kolor znacznika [liczba, opcjonalny] Następna kolumna to opcjonalna kolumna liczbowa używana do przypisywania koloru do tego znacznika na podstawie skali określonej we właściwości colorAxis.colors. Jeśli nie ma tej kolumny, wszystkie znaczniki mają ten sam kolor. Jeśli kolumna jest obecna, puste wartości są niedozwolone. Wartości są skalowane względem siebie lub bezwzględnie do wartości określonych we właściwości colorAxis.values.
Rozmiar znacznika [liczba, opcjonalny] opcjonalna kolumna liczbowa używana do przypisywania rozmiaru znacznika w porównaniu z innymi rozmiarami znaczników. Jeśli nie ma tej kolumny, zostanie użyta wartość z poprzedniej kolumny (lub rozmiar domyślny, jeśli nie podano też kolumny z kolorem). Jeśli kolumna jest obecna, puste wartości są niedozwolone.

Format trybu tekstowego

Etykieta jest podana w pierwszej kolumnie oraz 1 opcjonalna kolumna:

Etykieta tekstu [ciąg znaków, wymagany] konkretny adres ciągu znaków (np. „Rynek Główny 12”).
Rozmiar tekstu [liczba, opcjonalny] Druga kolumna to opcjonalna kolumna liczbowa używana do przypisywania rozmiaru etykiety. Jeśli nie ma tej kolumny, wszystkie etykiety mają ten sam rozmiar.

Opcje konfiguracji

Nazwa
backgroundColor,	Kolor tła głównego obszaru wykresu. Może to być prosty ciąg kolorów HTML, taki jak `'red'` lub `'#00cc00'`, lub obiekt z tymi właściwościami. Typ: ciąg znaków lub obiekt Domyślny: biały
backgroundColor.fill	Kolor wypełnienia wykresu w postaci koloru HTML. Typ: ciąg znaków Domyślny: biały
backgroundColor.type	Kolor obramowania wykresu w postaci ciągu kolorów HTML. Typ: ciąg znaków Domyślne: „#666”
backgroundColor.rayWidth	Szerokość obramowania w pikselach. Typ: liczba Wartość domyślna: 0
kolor osi	Obiekt określający mapowanie między wartościami kolumn kolorów i kolorami lub skalą gradientu. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w ten sposób: {minValue: 0, colors: ['#FF0000', '#00FF00']} Typ: obiekt Domyślne:null
kolorAxis.minValue	Jeśli jest podany, określa minimalną wartość danych koloru wykresu. Wartości danych koloru o tej wartości lub niższej będą renderowane jako pierwszy kolor w zakresie `colorAxis.colors`. Typ: liczba Wartość domyślna: minimalna wartość kolumny koloru w danych wykresu
kolorAxis.maxValue	Jeśli jest podany, określa maksymalną wartość danych koloru wykresu. Wartości danych koloru o tej wartości lub wyższej zostaną wyrenderowane jako ostatni kolor w zakresie `colorAxis.colors`. Typ: liczba Domyślny: maksymalna wartość kolumny koloru w danych wykresu
kolorAxis.values	Jeśli ta opcja jest dostępna, określa sposób powiązania wartości z kolorami. Każda wartość jest powiązana z odpowiednim kolorem w tablicy `colorAxis.colors`. Te wartości mają zastosowanie do danych koloru wykresu. Kolorystyka odbywa się zgodnie z gradientem wartości podanych w tym miejscu. Brak wartości dla tej opcji to odpowiednik [minValue, maxValue]. Typ: tablica liczb Domyślne:null
kolor_osi.kolory	Kolory, które można przypisać do wartości w wizualizacji. Tablica ciągów znaków, w których każdy jest ciągiem koloru HTML, np. `colorAxis: {colors:['red','#004411']}`. Musisz mieć co najmniej 2 wartości. gradient będzie zawierał wszystkie wartości oraz obliczone wartości pośrednie – pierwszy kolor będzie najmniejszy, a ostatni – najwyższym. Typ: tablica ciągów kolorów Domyślne:null
kolorRegionbezdanych	Kolor przypisywany do regionów bez powiązanych danych. Typ: ciąg znaków Domyślnie: „#F5F5F5”
kolor domyślny	Kolor używany w przypadku punktów danych na wykresie geograficznym, gdy lokalizacja (np. `'US'`) jest obecna, ale jej wartość to `null` lub nie jest określona. Różni się on od koloru `datalessRegionColor`, który jest używany, gdy brakuje danych. Typ: ciąg znaków Domyślny: „#267114”
tryb wyświetlania	Jakiego typu jest to wykres geograficzny. Format tabel danych musi pasować do podanej wartości. Obsługiwane są te wartości: „auto” – wybierz na podstawie formatu tabeli danych. „regions” (regiony) – pokoloruj regiony na wykresie geograficznym. „markers” – znaczniki na regionach. „text” – oznacz regiony etykietami na podstawie tekstu z tabeli danych. Typ: ciąg znaków Domyślny: „auto”.
domena	Pokaż wykres geograficzny tak, jakby był udostępniany z tego regionu. Na przykład ustawienie `domain` na `'IN'` spowoduje, że Kaszmir będzie pochodzić z Indii, a nie z terytorium spornego. Typ: ciąg znaków Domyślne: null
enableRegionInteractivity	Jeśli ma wartość true (prawda), włącz interaktywność w regionie, w tym zaznaczenie i wskaźnik narzędzi po najechaniu kursorem myszy, oraz wybór regionu i uruchamianie zdarzeń `regionClick` i `select` po kliknięciu. Wartość domyślna to true (tryb) w trybie regionu oraz false (fałsz) w trybie znacznika. Typ: wartość logiczna Domyślna:automatycznie.
forceIFrame	Rysuje wykres wewnątrz wbudowanej ramki. (Pamiętaj, że ta opcja jest ignorowana w IE8 – wszystkie wykresy IE8 są ujęte w ramki iFrame). Typ: wartość logiczna Wartość domyślna: false
Wersja wykresu	Wersja danych granicy wykresu geograficznego. Dostępne są wersje `10` i `11`. Typ: liczba Wartość domyślna: 10
wysokość	Wysokość wizualizacji w pikselach. Domyślna wysokość to 347 pikseli, chyba że określona jest opcja `width`, a zasada `keepAspectRatio` ma wartość Prawda. W takim przypadku wysokość jest odpowiednio obliczana. Typ: liczba Ustawienie domyślne: automatyczne
proporcjaAspectRatio	Jeśli wybrano opcję prawda, wykres geograficzny zostanie narysowany w największym rozmiarze, który mieści się w obszarze wykresu w jego naturalnym współczynniku proporcji. Jeśli wybierzesz tylko jedną z opcji `width` i `height`, druga wartość zostanie obliczona zgodnie ze współczynnikiem proporcji. Jeśli ma wartość false (fałsz), wykres geograficzny zostanie rozciągnięty do dokładnego rozmiaru wykresu zgodnie z opcjami `width` i `height`. Typ: wartość logiczna Wartość domyślna: true
legenda	Obiekt z elementami do konfigurowania różnych aspektów legendy lub „none”, jeśli nie ma ich wyświetlać. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {textStyle: {color: 'blue', fontSize: 16}} Typ: obiekt / „none” Domyślne: null
legend.numberFormat	Ciąg liczbowy etykiet liczbowych. Jest to podzbiór wzorca ICU. Na przykład `{numberFormat:'.##'}` będzie wyświetlać wartości „10.66”, „10.6” i „10.0” dla wartości 10.666, 10.6 i 10. Typ: ciąg znaków Ustawienie domyślne: automatyczne
legend.textStyle,	Obiekt określający styl tekstu legendy. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` może być dowolnym ciągiem koloru HTML, na przykład: `'red'` lub `'#00cc00'`. Zobacz też `fontName` i `fontSize`. Typ: obiekt Domyślnie: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
region	Obszar do wyświetlenia na wykresie geograficznym. Pojawią się też obszary otaczające. Dostępne wartości: „world” – mapa geograficzna całego świata. Kontynent lub subkontynent określony za pomocą 3-cyfrowego kodu, np. „011” dla Afryki Zachodniej. Kraj określony kodem ISO 3166-1 alfa-2, np. „AU” dla Australii. Stan w Stanach Zjednoczonych określony kodem ISO 3166-2:US, np. „US-AL” dla Alabamy. Pamiętaj, że opcja `resolution` musi być ustawiona na „prowincje” lub „metro”. Typ: ciąg znaków Domyślny: „world”
lupa powiększająca	Obiekt z członkami, który służy do konfigurowania różnych aspektów lupy. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {enable: true, zoomFactor: 7.5} Typ: obiekt Domyślne: `{enable: true, zoomFactor: 5.0}`
LuxingGlass.enable	Jeśli ma wartość true (prawda), gdy użytkownik najedzie kursorem na niewyraźny znacznik, otworzy się lupa. Uwaga: ta funkcja nie jest obsługiwana w przeglądarkach, które nie obsługują SVG, czyli Internet Explorer w wersji 8 lub starszej. Typ: wartość logiczna Wartość domyślna: true
powiększenie.laser.zoomFactor	Współczynnik powiększenia lupy. Może być dowolną liczbą większą niż 0. Typ: liczba Wartość domyślna: 5.0
znacznik przezroczystości	Przezroczystość znaczników – wartość 0,0 oznacza pełną przezroczystość, a 1,0 – pełną przezroczystość. Typ: liczba, 0,0–1,0 Domyślna: 1.0
wersjakodera-regionu	Wersja danych regionu. Dostępne są wersje `0` i `1`. Typ: liczba Wartość domyślna: 0
rozwiązanie	Rozdzielczość granic geogramy. Wybierz jedną z tych wartości: „country” – obsługiwane we wszystkich regionach z wyjątkiem regionów Stanów Zjednoczonych. „prowincje” – obsługiwane tylko w przypadku regionów krajów i regionów stanowych USA. Funkcja nie jest obsługiwana we wszystkich krajach. Przeprowadź test, by sprawdzić, czy ta opcja jest obsługiwana. „metros” – funkcja dostępna tylko w przypadku stanów krajowych i regionów stanu w Stanach Zjednoczonych. Typ: ciąg znaków Wartość domyślna: „countries”
rozmiarA	Obiekt z użytkownikami, który pozwala skonfigurować sposób powiązania wartości z rozmiarem dymka. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {minValue: 0, maxSize: 20} Typ: obiekt Domyślne: null
sizeAxis.maxSize	Maksymalny promień największego możliwego dymka w pikselach. Typ: liczba Wartość domyślna: 12
rozmiarAxis.maxValue	Wartość rozmiaru (jaka znajduje się w danych wykresu) zostanie zmapowana na `sizeAxis.maxSize`. Większe wartości zostaną przycięte do tej wartości. Typ: liczba Domyślne:maksymalna wartość w kolumnie rozmiaru w danych wykresu
sizeAxis.minSize	Minimalny promień najmniejszego możliwego dymka w pikselach. Typ: liczba Wartość domyślna: 3
rozmiarAxis.minValue	Wartość rozmiaru (jaka znajduje się w danych wykresu) zostanie zmapowana na `sizeAxis.minSize`. Mniejsze wartości zostaną przycięte do tej wartości. Typ: liczba Domyślny: minimalna wartość kolumny rozmiaru w danych wykresu
etykietka	Obiekt z członkami, który służy do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {textStyle: {color: '#FF0000'}, showColorCode: true} Typ: obiekt Domyślne:null
tooltip.textStyle	Obiekt określający styl tekstu etykietki. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` może być dowolnym ciągiem koloru HTML, na przykład: `'red'` lub `'#00cc00'`. Zobacz też `fontName` i `fontSize`. Typ: obiekt Domyślnie: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
tooltip.trigger	Interakcja użytkownika, która powoduje wyświetlenie etykietki: „focus” – etykietka jest wyświetlana, gdy użytkownik najedzie kursorem na element. „none” – etykietka nie będzie wyświetlana. „selection” – etykietka będzie wyświetlana, gdy użytkownik wybierze element. Typ: ciąg znaków Domyślny: „focus”
szerokość	Szerokość wizualizacji w pikselach. Domyślna szerokość to 556 pikseli, chyba że określona jest opcja `height`, a zasada `keepAspectRatio` ma wartość Prawda. W takim przypadku szerokość jest odpowiednio obliczana. Typ: liczba Ustawienie domyślne: automatyczne

Hierarchia i kody kontynentów

Wykresy kontynentów/subkontynentów można wyświetlać, ustawiając opcję region na jeden z tych 3-cyfrowych kodów. Kody i hierarchia opierają się (choć z pewnymi wyjątkami) na tym, które zostały opracowane i utrzymywane przez Dział Statystyczny ONZ.

Kontynent	Subkontynent	Kraje
`002` – Afryka	`015` – Afryka Północna	DZ, EG, EH, LY, MA, SD, SS, TN
	`011` – Afryka Zachodnia	BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, MR 222222,2}2}2}2}2}2:2
	`017` – Afryka Środkowa	AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
	`014` – Afryka Wschodnia
	`018` – Afryka Południowa	BW, LS, NA, SZ, ZA
`150` – Europa	`154` – Europa Północna	GG, JE, AX, DK, EE, FI, FO, GB, IS, IM, IS, 2, 2, 2, 2, 2 2, 2, 2}2:2
	`155` – Europa Zachodnia	AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL
	`151` – Europa Wschodnia	BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA
	`039` – Europa Południowa	AD, AL, BA, ES, GI, GR, HR, IT, ME, MK, MT, 2, 2, 2, 2, 32}2}2}2
`019` – obie Ameryki	`021` – Ameryka Północna	BM, CA, GL, PM, US
	`029` – Karaiby	br żaża wża w skorzystać osiągnąć osiągnąć osiągnąć osiągnąć osiągnąć wma osiągnąć osiągnąć osiągnąć osiągnąć U tych osiągnąć osiągnąć w tych osiągnąć osiągnąć osiągnąć w w obejrzeć w zobaczyć w zobaczyć w zobaczyć skorzystać w w zostać w powoduje w zostać w zostać.
	`013` – Ameryka Środkowa	BZ, CR, GT, HN, MX, NI, PA, SV
	`005` – Ameryka Południowa	AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY, 22 2
`142` – Azja	`143` – Azja Środkowa	TM, TJ, KG, KZ, UZ
	`030` – Azja Wschodnia	CN, HK, JP, KP, KR, MN, MO, TW
	`034` – Azja Południowa	AF, BD, BT, IN, IR, LK, MV, NP, PK
	`035` – Azja Południowo-Wschodnia	BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL } 2 2
	`145` – Azja Zachodnia
`009` – Oceania	`053` – Australia i Nowa Zelandia	Australia, NF i Nowa Zelandia
	`054` – Melanezja	FJ, NC, PG, SB, VU
	`057` – Mikronezja	FM, GU, KI, MH, MP, NR, PW
	`061` – Polinezja	AS, CK, NU, PF, PN, TK, TO, TV, WF, WS

Metody

Metoda
`clearChart()`	Czyści wykres i usuwa wszystkie przydzielone zasoby. Typ zwrotu: brak
`draw(data, options)`	Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia `ready`. `Extended description`, Typ zwrotu: brak
`getImageURI()`	Zwraca wykres zserializowany jako identyfikator URI obrazu. Wywołuj je po narysowaniu wykresu. Patrz Drukowanie wykresów PNG. Typ zwrotu: ciąg znaków
`getSelection()`	Zwraca tablicę wybranych elementów wykresu. Elementy, które można wybrać, to regiony z przypisaną wartością. Na tym wykresie w danym momencie możesz wybrać tylko 1 element. `Extended description`. Typ zwrotu: tablica elementów wyboru.
`setSelection()`	Zaznacza określone elementy wykresu. Anuluje poprzedni wybór. Elementy, które można wybrać, to regiony z przypisaną wartością. Na tym wykresie możesz wybrać tylko jeden element naraz. `Extended description`. Typ zwrotu: brak

Zdarzenia

Nazwa
`error`	Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. Właściwości: id, message
`ready`	Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik tego zdarzenia przed wywołaniem metody `draw` i wywołanie ich dopiero po uruchomieniu zdarzenia. Właściwości: brak
`regionClick`	Wywoływane po kliknięciu regionu. Nie będą one wyświetlane w przypadku kraju określonego w opcji „region” (jeśli dany kraj jest na liście). Właściwości: 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.
`select`	Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer `getSelection()`. Właściwości: 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.