Wizualizacja: wykres geograficzny

  1. Overview
  2. Wykresy geograficzne regionów
  3. Wykresy geograficzne znacznika
  4. Tekstowe wykresy geograficzne
  5. Kolorowanie wykresu
  6. Wczytuję
  7. Format danych
  8. Opcje konfiguracji
  9. Metody
  10. Zdarzenia
  11. Zasady dotyczące danych

Omówienie

Wykres geograficzny to mapa kraju, kontynentu lub regionu z obszarami zidentyfikowanymi na jeden z 3 sposobów:

  • Tryb regionu pozwala kolorować całe regiony, takie jak kraje, prowincje czy stany.
  • W trybie znaczników okręgi wskazują regiony, które są skalowane zgodnie z podaną przez Ciebie wartością.
  • Tryb tekstowy oznacza regiony za pomocą identyfikatorów (np. „Rosja” lub „Azja”).

Wykres geograficzny jest renderowany w przeglądarce za pomocą SVG lub VML. Pamiętaj, że wykresu geograficznego nie można przewijać ani przeciągać. Jest to wykres liniowy, a nie mapa terenu. Jeśli chcesz skorzystać z tego elementu, rozważ skorzystanie z wizualizacji mapy.

Wykresy geograficzne regionów

Styl regions wypełnia całe regiony (zwykle kraje) kolorami odpowiadającymi przypisanym przez Ciebie 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 znacznika

Styl markers renderuje okręgi w określonych lokalizacjach na wykresie geograficznym o określonym kolorze i rozmiarze.
Najedź kursorem na zapchane znaczniki wokół Rzymu, a otworzy się lupa. (lupa nie jest obsługiwana w Internet Explorerze w wersji 8 ani starszej).

<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

Normalnie wykresy geograficzne znaczników wyświetlają najmniejszą wartość znacznika jako minimalną wartość. Jeśli zamiast tego chcesz wyświetlać proporcjonalne wartości znaczników (np. wartości procentowe), użyj opcji sizeAxis, aby bezpośrednio ustawić wartości minValue i maxValue.

Oto przykładowa mapa Europy Zachodniej z populacjami i obszarami 3 krajów: Francji, Niemiec i Polski. Podane wartości są wartościami bezwzględnymi (np. 65 milionów we Francji), ale te obszary to procentowy udział w całości: francuski znacznik ma kolor fioletowy, ponieważ liczba mieszkańców jest średnia, ale jego wielkość to 50 (z możliwych 100), ponieważ obszar ten zawiera 50% powierzchni obszaru.

Używamy w tym kodzie sizeAxis, aby określić rozmiary znaczników z zakresu od 0 do 100. Używamy też colorAxis z wartościami RGB, aby pokazać populacji w zakresie kolorów od pomarańczowego do niebieskiego. Jest to widmo, które będzie się dobrze sprawdzać u użytkowników z wadami rozpoznawania barw. Na koniec określamy Europę Zachodnią za pomocą atrybutu region o wartości 155, jak podano w dalszej części tego dokumentu „Hierarchia treści i kody”.

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

Tekstowe wykresy geograficzne

Za pomocą funkcji displayMode: text możesz nakładać etykiety tekstowe na wykres geograficzny.

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

Istnieje kilka opcji dostosowywania kolorów wykresów geograficznych:

  • colorAxis: zakres kolorów do użycia dla regionów w tabeli danych.
  • backgroundColor: kolor tła wykresu.
  • datalessRegionColor: kolor przypisany do regionów bez powiązanych danych.
  • defaultColor: kolor przypisany do regionów tabeli danych, których wartość wynosi null lub nie jest określona.

Najważniejsza jest opcja colorAxis, która pozwala określić zakres kolorów wartości danych. W tablicy colorAxis pierwszy element to kolor nadany najmniejszej wartości w zbiorze danych, a ostatnim jest kolor nadany największej wartości w zbiorze danych. Jeśli podasz więcej niż 2 kolory, wystąpi między nimi interpolacja.

Na wykresie poniżej skorzystamy ze wszystkich 4 opcji. colorAxis pokazuje Afrykę w kolorach flagi państwa Afryki, wskazując szerokości geograficzne krajów: od czerwonego na północy przez czarny do zielonego na południu. Opcja backgroundColor służy do kolorowania tła jasnoniebieskiego, datalessRegionColor – dla krajów spoza Afryki – na jasnoróżowy, a defaultColor dla Madagaskaru.
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". Pamiętaj, że nie należy kopiować naszego klucza mapsApiKey, ponieważ to nie zadziała. Nie potrzebujesz mapsApiKey, o ile Twój wykres nie wymaga geokodowania ani używania niestandardowych kodów do identyfikowania lokalizacji. Więcej informacji znajdziesz w artykule o wczytywaniu ustawień. 

  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 DataTable zależy od używanego trybu wyświetlania: regions, markers lub text.

Format trybu regionów

Lokalizacja jest wprowadzana w jednej kolumnie oraz jednej opcjonalnej kolumnie w sposób opisany poniżej:

  1. Lokalizacja regionu [ciąg znaków, wymagany] – region do wyróżnienia. Akceptowane są wszystkie poniższe formaty. W poszczególnych wierszach możesz używać różnych formatów:
    • Nazwa kraju jako ciąg znaków (np. „Anglia”), kod ISO-3166-1 alfa-2 pisany wielkimi literami lub jego odpowiedni tekst w języku angielskim (np. „GB” lub „Wielka Brytania”).
    • Nazwa kodu regionu zapisana wielkimi literami w formacie ISO-3166-2 lub jego odpowiednik w języku angielskim (np. „US-NJ” lub „New Jersey”).
    • Numer kierunkowy obszaru miejskiego. Są to 3-cyfrowe kody obszarów miejskich używane do wyznaczania różnych regionów. Obsługiwane są tylko kody w Stanach Zjednoczonych. Pamiętaj, że to nie to samo co telefoniczne numery kierunkowe.
    • Każda wartość obsługiwana przez właściwość region.
  2. Kolor regionu [liczba, opcjonalnie] – opcjonalna kolumna liczbowa używana do przypisania koloru do regionu, zgodnie ze skalą określoną we właściwości colorAxis.colors. Jeśli ta kolumna nie jest dostępna, wszystkie regiony mają ten sam kolor. Jeśli ta kolumna jest dostępna, wartości null są niedozwolone. Wartości są skalowane względem wartości sizeAxis.minValue/sizeAxis.maxValue lub do wartości określonych we właściwości colorAxis.values, jeśli zostały podane.

Format trybu znaczników

Liczba kolumn różni się w zależności od używanego formatu znacznika oraz innych opcjonalnych kolumn.

  • Lokalizacja znacznika [wymagana]
    Pierwsza kolumna zawiera adres w postaci konkretnego ciągu znaków (na przykład „1600 Pennsylvania Ave”).

    LUB

    Pierwsze 2 kolumny zawierają wartości liczbowe, gdzie pierwsza kolumna odpowiada szerokości geograficznej, a druga jej długością.

    Uwaga: zalecamy używanie kodów ISO 3166 w trybie „regionów”, ale ten tryb działa najlepiej z dłuższymi nazwami w przypadku regionów (takich jak Niemcy, Panama itp.). Dzieje się tak, ponieważ w trybie znaczników są używane Mapy Google do geokodowania lokalizacji (przekształcanie lokalizacji w postaci ciągu znaków na szerokość i długość geograficzną). W efekcie niejednoznaczne lokalizacje mogą nie być objęte geokodowaniem. Na przykład „DE” to Niemcy lub Delaware, a „PA” to Panama lub Pensylwania.

  • Kolor znacznika [liczba, opcjonalnie] Kolejna kolumna to opcjonalna kolumna liczbowa używana do przypisania koloru do znacznika, na podstawie skali określonej we właściwości colorAxis.colors. Jeśli ta kolumna nie jest dostępna, wszystkie znaczniki mają ten sam kolor. Jeśli ta kolumna jest dostępna, wartości null są niedozwolone. Wartości są skalowane względem siebie nawzajem lub bezwzględnie do wartości określonych we właściwości colorAxis.values.
  • Rozmiar znacznika [liczba, opcjonalna]: opcjonalna kolumna liczbowa używana do przypisywania rozmiaru znacznika w stosunku do innych rozmiarów znaczników. Jeśli ta kolumna nie jest dostępna, używana jest wartość z poprzedniej kolumny (lub rozmiar domyślny, jeśli nie podano także kolumny koloru). Jeśli ta kolumna jest dostępna, wartości null są niedozwolone.

Format trybu tekstowego

Etykieta jest wpisana w pierwszej kolumnie oraz jeszcze jedną opcjonalną kolumnę:

  • Etykieta tekstowa [ciąg znaków, wymagany] Konkretny adres w postaci ciągu znaków (np. „1600 Pennsylvania Ave”).
  • Rozmiar tekstu [liczba, opcjonalnie] Druga kolumna jest opcjonalną kolumną liczbową służącą do przypisywania rozmiaru etykiety. Jeśli ta kolumna nie jest dostępna, wszystkie etykiety mają ten sam rozmiar.

Opcje konfiguracji

Nazwa
backgroundColor

Kolor tła głównego obszaru wykresu. Może to być prosty ciąg znaków koloru HTML, np. 'red' lub '#00cc00', albo obiekt z tymi właściwościami.

Typ: ciąg znaków lub obiekt
Domyślnie: biały
backgroundColor.fill

Kolor wypełnienia wykresu jako ciąg znaków HTML koloru.

Typ: ciąg znaków
Domyślnie: biały
backgroundColor.stroke

Kolor obramowania wykresu jako ciąg znaków HTML koloru.

Typ: ciąg znaków
Domyślnie: „#666”.
backgroundColor.strokeWidth

Szerokość obramowania w pikselach.

Typ: liczba
Wartość domyślna: 0
colorAxis

Obiekt, który określa mapowanie między wartościami i kolorami w kolumnie koloru lub skalę gradientu. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Typ: obiekt
Wartość domyślna:null
colorAxis.minValue

Jeśli ta opcja jest dostępna, określa minimalną wartość danych koloru wykresu. Wartości danych koloru o tej i niższych wartościach będą renderowane jako pierwszy kolor w zakresie colorAxis.colors.

Typ: liczba
Domyślnie: minimalna wartość kolumny koloru w danych wykresu
colorAxis.maxValue

Jeśli ta opcja jest dostępna, określa maksymalną wartość danych koloru wykresu. Wartości danych koloru o tej i wyższych wartościach będą renderowane jako ostatni kolor w zakresie colorAxis.colors.

Typ: liczba
Domyślnie: maksymalna wartość kolumny koloru w danych wykresu
colorAxis.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. Wartości te mają zastosowanie do danych o kolorach na wykresie. Kolorowanie odbywa się zgodnie z gradientem wartości określonych w tym miejscu. Niepodanie wartości w przypadku tej opcji jest równoważne z podanie wartości [minValue, maxValue].

Typ: tablica liczb
Wartość domyślna:null
colorAxis.colors

Kolory do przypisania do wartości w wizualizacji. Tablica ciągów tekstowych, w których każdy element jest ciągiem znaków koloru HTML, np. colorAxis: {colors:['red','#004411']}. Musisz mieć co najmniej 2 wartości. Gradient będzie obejmować wszystkie wartości oraz obliczone wartości pośrednie, przy czym pierwszy kolor ma najmniejszą wartość, a ostatni – najwyższą.

Typ: tablica ciągów kolorów
Wartość domyślna:null
datalessRegionColor

Kolor do przypisania do regionów bez powiązanych danych.

Typ: ciąg znaków
Domyślnie: „#F5F5F5”.
defaultColor

Kolor, który ma być używany w przypadku punktów danych na wykresie geograficznym, gdy lokalizacja (np. 'US') jest podany, ale wartość jest null lub nie jest określona. Różni się od koloru datalessRegionColor, który jest używany, gdy brakuje danych.

Typ: ciąg znaków
Domyślnie: „#267114”.
displayMode

Typ wykresu geograficznego. Format DataTable musi odpowiadać określonej wartości. Obsługiwane są te wartości:

  • „auto” – wybierz na podstawie formatu tabeli danych.
  • „regiony” – pokoloruj regiony na wykresie geograficznym.
  • „znaczniki” – znaczniki miejsca w regionach.
  • „text” – oznaczenie regionów tekstem z tabeli DataTable.
Typ: ciąg znaków
Domyślnie: „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 należeć do Indii, a nie spornego terytorium.

Typ: ciąg znaków
Wartość domyślna:null
enableRegionInteractivity

Jeśli ustawisz wartość prawda, włącz interaktywność związaną z regionem, w tym zaznaczanie zaznaczenia i rozwijanie etykiet po najechaniu kursorem, a także wybór regionu i wywoływanie zdarzeń regionClick i select po kliknięciu.

Wartość domyślna to true (prawda) w trybie regionu i fałsz w trybie znacznika.

Typ: wartość logiczna
Domyślne:automatyczne
forceIFrame

Rysuje wykres wewnątrz ramki wbudowanej. (Pamiętaj, że w IE8 ta opcja jest ignorowana – wszystkie wykresy w IE8 są rysowane w ramkach i-frame).

Typ: wartość logiczna
Wartość domyślna: fałsz.
geochartVersion

Wersja danych obramowania wykresu geograficznego. Dostępne są wersje 10 i 11.

Typ: liczba
Domyślnie:10
wysokość

Wysokość wizualizacji w pikselach. Domyślna wysokość to 347 pikseli, chyba że określono opcję width, a keepAspectRatio ma wartość Prawda. W takim przypadku wysokość jest obliczana odpowiednio.

Typ: liczba
Domyślnie automatycznie
keepAspectRatio

Jeśli ustawisz wartość prawda, wykres geograficzny będzie rysowany w największym rozmiarze, który zmieści się w obszarze wykresu przy zachowaniu naturalnego współczynnika proporcji. Jeśli określono tylko jedną z opcji width i height, druga opcja zostanie obliczona zgodnie ze współczynnikiem proporcji.

Jeśli ma wartość Fałsz, wykres geograficzny będzie rozciągnięty do dokładnie określonego rozmiaru określonego w opcjach width i height.

Typ: wartość logiczna
Wartość domyślna:true (prawda)
legenda

Obiekt z członkami służącymi do konfigurowania różnych aspektów legendy lub „none”, jeśli nie powinna pojawić się legenda. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w następujący sposób: 

 {textStyle: {color: 'blue', fontSize: 16}}
Typ: obiekt / „brak”
Wartość domyślna:null
legend.numberFormat

Ciąg formatu etykiet liczbowych. To jest podzbiór zestawu wzorców OIOM . Na przykład {numberFormat:'.##'} wyświetli wartości „10,66”, „10,6” i „10,0” dla wartości 10,666, 10,6 i 10.

Typ: ciąg znaków
Domyślnie automatycznie
legend.textStyle

Obiekt określający styl tekstu legendy. Obiekt ma ten format:

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

color może być dowolnym ciągiem znaków HTML koloru, 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. (Wyświetlane będą także otoczenie). Dostępne wartości:

  • „świat” – schemat geograficzny całego świata.
  • Kontynent lub subkontynent określony za pomocą 3-cyfrowego kodu, np. „011” dla Afryki Zachodniej.
  • Kraj określony za pomocą kodu ISO 3166-1 alfa-2, np. „AU” dla Australii.
  • Stan w Stanach Zjednoczonych określony za pomocą kodu ISO 3166-2:US, np. „US-AL” w odniesieniu do Alabamy. Pamiętaj, że opcja resolution musi być ustawiona na „województwa” lub „obszar miejski”.
Typ: ciąg znaków
Domyślny: „world”.
magnifyingGlass

Obiekt, w którym członkowie mogą konfigurować różne aspekty lupy. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w następujący sposób: 

{enable: true, zoomFactor: 7.5}
Typ: obiekt
Wartość domyślna: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

Jeśli ma wartość true (prawda), gdy użytkownik pozostaje nad prześwietlonym znacznikiem, otwiera się lupa.

Uwaga: ta funkcja nie jest obsługiwana w przeglądarkach, które nie obsługują SVG, czyli Internet Explorera w wersji 8 lub starszej.

Typ: wartość logiczna
Wartość domyślna:true (prawda)
magnifyingGlass.zoomFactor

Współczynnik powiększenia lupy. Może być dowolną liczbą większą niż 0.

Typ: liczba
Domyślny:5,0
markerOpacity

Przezroczystość znaczników, gdzie 0,0 oznacza pełną przezroczystość, a 1,0 – pełną nieprzezroczystość.

Typ: liczba, 0,0–1,0
Wartość domyślna: 1,0
regioncoderVersion

Wersja danych kodu regionu. Dostępne są wersje 0 i 1.

Typ: liczba
Wartość domyślna: 0
rozwiązanie

Rozdzielczość granic wykresu geograficznego. Wybierz jedną z tych wartości:

  • „kraje” – obsługiwane we wszystkich regionach z wyjątkiem regionów stanowych w USA.
  • „województwa” – obsługiwane tylko w przypadku regionów krajowych i stanów USA. Ta opcja nie jest obsługiwana we wszystkich krajach. Przetestuj wybrany kraj, aby sprawdzić, czy ta opcja jest obsługiwana.
  • „obszar miejski” – obsługiwany tylko dla regionów krajowych w USA i stanów USA.
Typ: ciąg znaków
Domyślny: „kraje”.
sizeAxis

Obiekt z członkami służącymi do konfigurowania sposobu, w jaki wartości są powiązane z rozmiarem dymka. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w następujący sposób: 

 {minValue: 0,  maxSize: 20}
Typ: obiekt
Wartość domyślna:null
sizeAxis.maxSize

Maksymalny promień największego możliwego bąbelka (w pikselach).

Typ: liczba
Wartość domyślna: 12
sizeAxis.maxValue

Wartość rozmiaru (tak jak w danych na wykresie) do zmapowania na sizeAxis.maxSize. Większe wartości zostaną przycięte do tej wartości.

Typ: liczba
Domyślnie: maksymalna wartość kolumny rozmiaru w danych wykresu
sizeAxis.minSize

Minimalny promień najmniejszego możliwego bąbelka (w pikselach).

Typ: liczba
Wartość domyślna: 3
sizeAxis.minValue

Wartość rozmiaru (tak jak w danych na wykresie) do zmapowania na sizeAxis.minSize. Mniejsze wartości zostaną przycięte do tej wartości.

Typ: liczba
Domyślnie: minimalna wartość kolumny rozmiaru w danych na wykresie
etykietka

Obiekt z elementami służącymi do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Typ: obiekt
Wartość domyślna:null
tooltip.textStyle

Obiekt, który określa styl tekstu etykietki. Obiekt ma ten format:

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

color może być dowolnym ciągiem znaków HTML koloru, 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:

  • „fokus” – etykietka jest wyświetlana po najechaniu przez użytkownika kursorem na element.
  • „none” (brak) – etykietka nie będzie wyświetlana.
  • „wybór” – etykietka zostanie wyświetlona, gdy użytkownik wybierze element.
Typ: ciąg znaków
Domyślnie: „fokus”
szerokość

Szerokość wizualizacji w pikselach. Domyślna szerokość to 556 pikseli, chyba że określono opcję height, a zasadę keepAspectRatio ma wartość Prawda. W takim przypadku szerokość jest obliczana odpowiednio.

Typ: liczba
Domyślnie automatycznie

 

Hierarchia i kody kontynentów

Możesz wyświetlić geografy kontynentów lub subkontynentów, ustawiając opcję region na jeden z poniższych 3-cyfrowych kodów. Kody i hierarchia opierają się (z pewnymi wyjątkami) na kodach opracowanych i utrzymywanych przez Wydział 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, , {SL2}, MSH2}SHSLSN
017 – Afryka Środkowa AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 – Afryka Wschodnia BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, RE2, SO2}} 6} ,ZW2}RWSCSOTZUG
018 – Afryka Południowa BW, LS, NA, SZ, ZA
150 – Europa 154 – Europa Północna GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, ISLV
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
019 – Ameryki 021 – Ameryka Północna BM, CA, GL, PM, US
029 – Karaiby AG, AI, AN, AW, BB, BL, BS, CU, DM, DO, GDGPLCMS
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, ,SRVE
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, MOJA, PH, SG, TH, TL, TP, VN
145 – Azja Zachodnia AE, AM, AZ, BH, {SY} {SY}{SY}GE, IL, IQ, JO, KW, LB
009 – Oceania 053 – Australia i Nowa Zelandia AU, NF, Nowa Zelandia
054 – Melanesia 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 zwalnia wszystkie przydzielone Ci zasoby.

Return Type: brak
draw(data, options)

Rysuje wykres. Wykres akceptuje kolejne wywołania metod dopiero po wywołaniu zdarzenia ready. Extended description.

Return Type: brak
getImageURI()

Zwraca wykres zserializowany jako identyfikator URI obrazu.

Wywołuj je po narysowaniu wykresu.

Zobacz Drukowanie wykresów PNG.

Return Type: (Typ zwracania): ciąg znaków
getSelection()

Zwraca tablicę wybranych elementów wykresu. Elementy do wyboru to regiony z przypisaną wartością. Na tym wykresie w danym momencie można wybrać tylko 1 element. Extended description

Return Type: tablica elementów zaznaczenia.
setSelection()

Wybiera określone elementy wykresu. Anuluje wcześniejszy wybór. Elementy do wyboru to regiony z przypisaną wartością. Na tym wykresie można wybrać tylko 1 element naraz. Extended description

Return Type: brak

Zdarzenia

Nazwa
error

Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd.

Właściwości: identyfikator, komunikat
ready

Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody draw i wywołaj je dopiero po wywołaniu zdarzenia.

Właściwości: brak
regionClick

Wywoływane po kliknięciu regionu. Nie zostanie zgłoszony dla kraju przypisanego w opcji „region” (jeśli na liście jest określony konkretny kraj).

Właściwości: obiekt z pojedynczą właściwością region będący ciągiem znaków w formacie ISO-3166 opisującym kliknięty region.
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. Więcej informacji o zasadach dotyczących danych znajdziesz w Warunkach korzystania z Map Google.