Visualisasi: GeoChart

  1. Ringkasan
  2. GeoChart Wilayah
  3. GeoChart Penanda
  4. GeoChart Teks
  5. Mewarnai diagram Anda
  6. Memuat
  7. Format data
  8. Opsi konfigurasi
  9. Metode
  10. Peristiwa
  11. Kebijakan data

Ringkasan

Geochart adalah peta negara, benua, atau wilayah dengan area yang diidentifikasi melalui salah satu dari tiga cara berikut:

  • Mode wilayah memberi warna seluruh wilayah, seperti negara, provinsi, atau negara bagian.
  • Mode penanda menggunakan lingkaran untuk menunjukkan wilayah yang diskalakan sesuai dengan nilai yang Anda tentukan.
  • Mode text memberi label pada wilayah dengan ID (mis., "Rusia" atau "Asia").

Diagram geografis dirender di dalam browser menggunakan SVG atau VML. Perhatikan bahwa diagram geografis tidak dapat di-scroll atau dapat ditarik, dan merupakan gambar garis, bukan peta medan; jika Anda menginginkan semua itu, pertimbangkan untuk menggunakan visualisasi peta.

GeoChart Wilayah

Gaya regions mengisi seluruh wilayah (biasanya negara) dengan warna yang sesuai dengan nilai yang Anda tetapkan.

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

GeoChart Penanda

Gaya markers merender lingkaran pada lokasi yang ditentukan pada diagram geografis, dengan warna dan ukuran yang Anda tentukan.
Coba arahkan kursor ke penanda yang berantakan di sekitar Roma, dan kaca pembesar akan terbuka untuk menampilkan penanda secara lebih detail. (Kaca pembesar tidak didukung di Internet Explorer versi 8 atau sebelumnya.)

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

Menampilkan Penanda Proporsional

Biasanya, diagram geografis penanda menampilkan nilai penanda terkecil sebagai titik minimal. Jika Anda ingin menampilkan nilai penanda proporsional (misalnya, karena berupa persentase), gunakan opsi sizeAxis untuk menetapkan minValue dan maxValue secara eksplisit.

Misalnya, berikut adalah peta Eropa Barat dengan populasi dan wilayah untuk tiga negara: Prancis, Jerman, dan Polandia. Populasinya adalah semua angka absolut (misalnya, 65 juta untuk Prancis), tetapi wilayahnya adalah semua persentase dari keseluruhan: penanda Prancis berwarna ungu karena populasinya sedang, tetapi berukuran 50 (dari kemungkinan 100) karena mencakup 50% dari luas wilayah yang digabungkan.

Dalam kode ini, kita menggunakan sizeAxis untuk menentukan ukuran penanda dalam rentang 0 hingga 100. Kami juga menggunakan colorAxis dengan nilai RGB untuk menampilkan populasi sebagai rentang warna dari oranye hingga biru, spektrum yang akan berfungsi dengan baik bagi pengguna yang memiliki kekurangan penglihatan warna. Terakhir, kita akan menetapkan Eropa barat dengan region 155, sesuai bagian "Hierarki dan Kode Konten" nanti dalam dokumen ini.

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

GeoChart Teks

Anda dapat menempatkan label teks pada diagram geografis dengan displayMode: text.

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

  var options = { displayMode: 'text' };
HTML Lengkap
<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>

Mewarnai diagram

Ada beberapa opsi untuk menyesuaikan warna GeoCharts:

  • colorAxis: spektrum warna yang akan digunakan untuk wilayah dalam tabel data.
  • backgroundColor: warna latar belakang diagram.
  • datalessRegionColor: warna yang akan ditetapkan ke wilayah tanpa data terkait.
  • defaultColor: warna yang akan ditetapkan ke region dalam tabel data yang nilainya adalah null atau tidak ditentukan.

Opsi colorAxis adalah opsi yang penting: opsi ini menentukan rentang warna untuk nilai data Anda. Dalam array colorAxis, elemen pertama adalah warna yang diberikan ke nilai terkecil dalam set data Anda, dan elemen terakhir adalah warna yang diberikan ke nilai terbesar dalam set data Anda. Jika Anda menentukan lebih dari dua warna, interpolasi akan terjadi di antara keduanya.

Dalam bagan berikut, kita akan menggunakan keempat opsi. colorAxis digunakan untuk menampilkan Afrika dengan warna bendera pan-Afrika, menggunakan garis lintang negara-negara: dari merah di utara, hingga hitam, hingga hijau di selatan. Opsi backgroundColor digunakan untuk mewarnai latar belakang biru muda, datalessRegionColor untuk mewarnai negara-negara non-Afrika dengan merah muda terang, dan defaultColor untuk Madagaskar.
Opsi
        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };
Halaman Web Lengkap
<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>

Memuat

Nama paket google.charts.load adalah "geochart". Perhatikan, Anda tidak boleh menyalin mapsApiKey; hal itu tidak akan berfungsi. Selama bagan Anda tidak memerlukan geocoding atau menggunakan kode non-standar untuk mengidentifikasi lokasi, Anda tidak memerlukan mapsApiKey. Untuk mengetahui detail selengkapnya, lihat Memuat Setelan. 

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

Nama class visualisasi geochart adalah google.visualization.GeoChart. 

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

Format data

Format DataTable bervariasi bergantung pada mode tampilan yang Anda gunakan: regions, markers, atau text.

Format mode region

Lokasi dimasukkan dalam satu kolom, ditambah satu kolom opsional seperti yang dijelaskan di sini:

  1. Lokasi wilayah [String, Wajib] - Wilayah yang akan ditandai. Semua format berikut diterima. Anda dapat menggunakan format yang berbeda di baris yang berbeda:
    • Nama negara sebagai string (misalnya, "Inggris"), atau kode ISO-3166-1 alpha-2 huruf besar atau padanan teks bahasa Inggrisnya (misalnya, "GB" atau "Inggris Raya").
    • Nama kode wilayah ISO-3166-2 dalam huruf besar atau padanan teks bahasa Inggrisnya (misalnya, "US-NJ" atau "New Jersey").
    • Kode area metropolitan. Ini adalah kode metro tiga digit yang digunakan untuk menentukan berbagai wilayah; kode AS hanya didukung. Perhatikan bahwa kode ini tidak sama dengan kode area telepon.
    • Nilai apa pun yang didukung oleh properti region.
  2. Warna wilayah [Angka, Opsional] - Kolom numerik opsional yang digunakan untuk menetapkan warna pada wilayah ini, berdasarkan skala yang ditentukan dalam properti colorAxis.colors. Jika kolom ini tidak ada, semua region akan memiliki warna yang sama. Jika kolom ada, nilai null tidak diizinkan. Nilai diskalakan sesuai dengan nilai sizeAxis.minValue/sizeAxis.maxValue, atau berdasarkan nilai yang ditentukan dalam properti colorAxis.values, jika disediakan.

Format mode penanda

Jumlah kolom bervariasi bergantung pada format penanda yang digunakan, serta kolom opsional lainnya.

  • Lokasi penanda [Wajib]
    Kolom pertama adalah alamat string spesifik (misalnya, "1600 Pennsylvania Ave").

    ATAU

    Dua kolom pertama berupa angka, dengan kolom pertama adalah lintang, dan kolom kedua adalah bujur.

    Catatan: Meskipun kami merekomendasikan penggunaan kode ISO 3166 untuk mode 'wilayah', mode 'penanda' berfungsi optimal dengan nama yang lebih panjang untuk wilayah (seperti Jerman, Panama, dll). Hal ini karena diagram geografis, saat dalam mode 'penanda', menggunakan Google Maps untuk melakukan geocoding terhadap lokasi (mengonversi lokasi string menjadi lintang dan bujur). Hal ini dapat menyebabkan lokasi yang ambigu tidak di-geocoding seperti yang Anda harapkan; seperti 'DE' yang merupakan singkatan dari Jerman atau Delaware, atau 'PA' yang merupakan singkatan dari Panama atau Pennsylvania.

  • Warna penanda [Angka, Opsional] Kolom berikutnya adalah kolom numerik opsional yang digunakan untuk menetapkan warna pada penanda ini, berdasarkan skala yang ditentukan di properti colorAxis.colors. Jika kolom ini tidak ada, semua penanda akan memiliki warna yang sama. Jika kolom ada, nilai null tidak diizinkan. Nilai-nilai diskalakan secara relatif terhadap satu sama lain, atau secara mutlak terhadap nilai yang ditentukan dalam properti colorAxis.values.
  • Ukuran penanda [Angka, Opsional] Kolom numerik opsional yang digunakan untuk menetapkan ukuran penanda, sesuai dengan ukuran penanda lainnya. Jika kolom ini tidak ada, nilai dari kolom sebelumnya akan digunakan (atau ukuran default, jika tidak ada kolom warna yang disediakan). Jika kolom ada, nilai null tidak diizinkan.

Format mode teks

Label dimasukkan di kolom pertama, ditambah satu kolom opsional:

  • Label teks [String, Wajib] Alamat string tertentu (misalnya, "1600 Pennsylvania Ave").
  • Ukuran teks [Angka, Opsional] Kolom kedua adalah kolom numerik opsional yang digunakan untuk menetapkan ukuran label. Jika kolom ini tidak ada, semua label akan memiliki ukuran yang sama.

Opsi konfigurasi

Name
backgroundColor

Warna latar belakang untuk area utama diagram. Dapat berupa string warna HTML sederhana, misalnya: 'red' atau '#00cc00', atau objek dengan properti berikut.

Jenis: string atau objek
Default: putih
backgroundColor.fill

Warna pengisi diagram, sebagai string warna HTML.

Jenis: string
Default: putih
backgroundColor.stroke

Warna batas diagram, sebagai string warna HTML.

Jenis: string
Default: '#666'
backgroundColor.strokeWidth

Lebar pembatas, dalam piksel.

Jenis: nomor
Default: 0
colorAxis

Objek yang menentukan pemetaan antara nilai kolom warna dan warna atau skala gradien. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditampilkan di sini: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Jenis: objek
Default: null
colorAxis.minValue

Jika ada, tentukan nilai minimum untuk data warna diagram. Nilai data warna dari nilai ini dan yang lebih rendah akan dirender sebagai warna pertama dalam rentang colorAxis.colors.

Jenis: nomor
Default: Nilai minimum kolom warna dalam data diagram
colorAxis.maxValue

Jika ada, tentukan nilai maksimum untuk data warna diagram. Nilai data warna dari nilai ini dan yang lebih tinggi akan dirender sebagai warna terakhir dalam rentang colorAxis.colors.

Jenis: nomor
Default: Nilai maksimum kolom warna dalam data diagram
colorAxis.values

Jika ada, kontrol cara nilai dikaitkan dengan warna. Setiap nilai dikaitkan dengan warna yang sesuai dalam array colorAxis.colors. Nilai ini berlaku untuk data warna diagram. Pewarnaan dilakukan sesuai dengan gradien nilai yang ditentukan di sini. Tidak menentukan nilai untuk opsi ini sama dengan menentukan [minValue, maxValue].

Jenis: array angka
Default: null
colorAxis.colors

Warna untuk menetapkan nilai-nilai dalam visualisasi. Array string, dengan setiap elemennya adalah string warna HTML, misalnya: colorAxis: {colors:['red','#004411']}. Anda harus memiliki setidaknya dua nilai; gradien akan menyertakan semua nilai Anda, ditambah nilai perantara yang dihitung, dengan warna pertama sebagai nilai terkecil, dan warna terakhir sebagai nilai tertinggi.

Jenis: array string warna
Default: null
datalessRegionColor

Warna yang akan ditetapkan ke wilayah tanpa data terkait.

Jenis: string
Default: '#F5F5F5'
defaultColor

Warna yang digunakan untuk titik data dalam diagram geografis jika lokasinya (mis., 'US' ) ada, tetapi nilainya null atau tidak ditentukan. Ini berbeda dengan datalessRegionColor, yang merupakan warna yang digunakan jika data tidak ada.

Jenis: string
Default: '#267114'
displayMode

Jenis geochart ini apa. Format DataTable harus cocok dengan nilai yang ditentukan. Nilai-nilai berikut ini didukung:

  • 'auto' - Pilih berdasarkan format DataTable.
  • 'region' - Mewarnai wilayah di diagram geografis.
  • 'penanda' - Menempatkan penanda pada wilayah.
  • 'text' - Memberi label pada region dengan teks dari DataTable.
Jenis: string
Default: 'otomatis'
domain

Tampilkan diagram geografis seolah-olah diagram tersebut disajikan dari region ini. Misalnya, menetapkan domain ke 'IN' akan menampilkan Kashmir sebagai milik India, bukan wilayah yang disengketakan.

Jenis: string
Default: null
enableRegionInteractivity

Jika true (benar), aktifkan interaktivitas region, termasuk fokus dan elaborasi ujung alat pada pengarahan kursor mouse, serta pemilihan region dan pengaktifan peristiwa regionClick dan select saat mouse diklik.

Nilai defaultnya adalah benar (true) dalam mode wilayah, dan salah (false) dalam mode penanda.

Jenis: boolean
Default: otomatis
forceIFrame

Menggambar diagram di dalam bingkai inline. (Perhatikan bahwa pada IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.)

Jenis: boolean
Default: false
geochartVersion

Versi data batas GeoChart. Versi 10 dan 11 tersedia.

Jenis: nomor
Default:10
tinggi

Tinggi visualisasi, dalam piksel. Tinggi default adalah 347 piksel, kecuali jika opsi width ditentukan dan keepAspectRatio ditetapkan ke true - dalam hal ini, tinggi akan dihitung sebagaimana mestinya.

Jenis: nomor
Default: otomatis
keepAspectRatio

Jika true (benar), geochart akan digambar pada ukuran terbesar yang dapat muat di dalam area diagram pada rasio aspek naturalnya. Jika hanya satu dari opsi width dan height yang ditentukan, opsi lainnya akan dihitung sesuai dengan rasio aspek.

Jika salah, diagram geografis akan dibentangkan ke ukuran diagram yang tepat seperti yang ditentukan oleh opsi width dan height.

Jenis: boolean
Default: benar (true)
legenda

Objek dengan anggota untuk mengonfigurasi berbagai aspek legenda, atau 'none', jika tidak ada legenda yang akan muncul. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: 

 {textStyle: {color: 'blue', fontSize: 16}}
Jenis: Objek / 'none'
Default: null
legend.numberFormat

String format untuk label numerik. Ini adalah subset dari kumpulan pola ICU . Misalnya, {numberFormat:'.##'} akan menampilkan nilai "10.66", "10.6", dan "10.0" untuk nilai 10.666, 10.6, dan 10.

Jenis: string
Default: otomatis
legend.textStyle

Objek yang menetapkan gaya teks legenda. Objek memiliki format ini:

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

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Jenis: objek
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
region

Area yang akan ditampilkan dalam diagram geografis. (Area sekitarnya juga akan ditampilkan.) Dapat berupa salah satu dari hal berikut:

  • 'world' - Diagram geografis seluruh dunia.
  • Benua atau sub-benua, yang ditentukan oleh kode 3 digit-nya, misalnya, '011' untuk Afrika Barat.
  • Negara, yang ditentukan berdasarkan kode ISO 3166-1 alpha-2, misalnya, 'AU' untuk Australia.
  • Negara bagian di Amerika Serikat, yang ditentukan oleh kode ISO 3166-2:US, mis., 'US-AL' untuk Alabama. Perhatikan bahwa opsi resolution harus ditetapkan ke 'provinces' atau 'metros'.
Jenis: string
Default: 'dunia'
magnifyingGlass

Objek dengan anggota untuk mengonfigurasi berbagai aspek kaca pembesar. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: 

{enable: true, zoomFactor: 7.5}
Jenis: Objek
Default: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

Jika true (benar), saat pengguna tetap berada di atas penanda yang berantakan, kaca pembesar akan dibuka.

Catatan: fitur ini tidak didukung di browser yang tidak mendukung SVG, yaitu Internet Explorer versi 8 atau yang lebih lama.

Jenis: boolean
Default: benar (true)
magnifyingGlass.zoomFactor

Faktor zoom kaca pembesar. Dapat berupa angka apa pun yang lebih besar dari 0.

Jenis: nomor
Default: 5,0
markerOpacity

Opasitas penanda, dengan 0,0 sepenuhnya transparan dan 1,0 sepenuhnya buram.

Jenis: angka, 0.0–1.0
Default: 1,0
regioncoderVersion

Versi data regioncoder. Versi 0 dan 1 tersedia.

Jenis: nomor
Default:0
resolusi

Resolusi batas geochart. Pilih salah satu nilai berikut:

  • 'countries' - Didukung untuk semua wilayah, kecuali untuk wilayah negara bagian AS.
  • 'provinsi' - Hanya didukung untuk wilayah negara dan wilayah negara bagian AS. Tidak didukung untuk semua negara; uji negara untuk mengetahui apakah opsi ini didukung.
  • 'metros' - Hanya didukung untuk wilayah negara AS dan negara bagian AS.
Jenis: string
Default: 'negara'
sizeAxis

Objek dengan anggota untuk mengonfigurasi cara nilai dikaitkan dengan ukuran balon. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: 

 {minValue: 0,  maxSize: 20}
Jenis: objek
Default: null
sizeAxis.maxSize

Radius maksimum balon terbesar, dalam piksel.

Jenis: nomor
Default: 12
sizeAxis.maxValue

Nilai ukuran (seperti yang muncul pada data diagram) yang akan dipetakan ke sizeAxis.maxSize. Nilai yang lebih besar akan dipangkas sesuai nilai ini.

Jenis: nomor
Default: Nilai maksimum kolom ukuran dalam data diagram
sizeAxis.minSize

Radius minimal balon terkecil, dalam piksel.

Jenis: nomor
Default: 3
sizeAxis.minValue

Nilai ukuran (seperti yang muncul pada data diagram) yang akan dipetakan ke sizeAxis.minSize. Nilai yang lebih kecil akan dipangkas sesuai nilai ini.

Jenis: nomor
Default: Nilai minimum kolom ukuran dalam data diagram
tooltip

Objek dengan anggota untuk mengonfigurasi berbagai elemen tooltip. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditampilkan di sini: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Jenis: objek
Default: null
tooltip.textStyle

Objek yang menentukan gaya teks tooltip. Objek memiliki format ini:

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

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Jenis: objek
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

Interaksi pengguna yang menyebabkan tooltip ditampilkan:

  • 'focus' - Tooltip akan ditampilkan saat pengguna mengarahkan kursor ke elemen.
  • 'none' - Tooltip tidak akan ditampilkan.
  • 'selection' - Tooltip akan ditampilkan saat pengguna memilih elemen.
Jenis: string
Default: 'fokus'
lebar

Lebar visualisasi, dalam piksel. Lebar default-nya adalah 556 piksel, kecuali jika opsi height ditentukan dan keepAspectRatio ditetapkan ke benar - dalam hal ini, lebar akan dihitung sebagaimana mestinya.

Jenis: nomor
Default: otomatis

 

Hierarki dan Kode Benua

Diagram geografis benua/subbenua dapat ditampilkan dengan menetapkan opsi region ke salah satu kode 3 digit berikut. Kode dan hierarkinya didasarkan, dengan beberapa pengecualian, pada kode yang dikembangkan dan dikelola oleh Divisi Statistik PBB .

Benua Subbenua Negara
002 - Afrika 015 - Afrika Utara DZ, EG, EH, LY, MA, SD, SS, TN
011 - Afrika Barat BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, MR{/21 NESHSLSN
017 - Afrika Tengah AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 - Afrika Timur BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, W, RWSCSOTZUG
018 - Afrika Selatan BW, LS, NA, SZ, ZA
150 - Eropa 154 - Eropa Utara GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, IS, LV
155 - Eropa Barat AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL
151 - Eropa Timur BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA
039 - Eropa Selatan AD, AL, BA, ES, GI, GR, HR, IT, ME, MK, MT,
019 - Amerika 021 - Amerika Utara BM, CA, GL, PM, US
029 - Karibia AG . . . . . . . .BBCUDMGDGPLCMS
013 - Amerika Tengah BZ, CR, GT, HN, MX, NI, PA, SV
005 - Amerika Selatan AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY, PY, PY, PYSRVE
142 - Asia 143 - Asia Tengah TM, TJ, KG, KZ, UZ
030 - Asia Timur CN, HK, JP, KP, KR, MN, MO, TW
034 - Asia Selatan AF, BD, BT, IN, IR, LK, MV, NP, PK
035 - Asia Tenggara BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL, VTP, VN
145 - Asia Barat AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW, LB, LB
009 - Oseania 053 - Australia dan Selandia Baru AU, NF, NZ
054 - Melanesia FJ, NC, PG, SB, VU
057 - Mikronesia FM, GU, KI, MH, MP, NR, PW
061 - Polinesia AS, CK, NU, PF, PN, TK, TO, TV, WF, WS

Metode

Metode
clearChart()

Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Pengembalian: tidak ada
draw(data, options)

Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa ready diaktifkan. Extended description.

Jenis Pengembalian: tidak ada
getImageURI()

Menampilkan diagram yang diserialisasi sebagai URI gambar.

Panggil ini setelah diagram digambar.

Lihat Mencetak Diagram PNG.

Jenis Pengembalian: string
getSelection()

Menampilkan array entitas diagram yang dipilih. Entitas yang dapat dipilih adalah wilayah yang memiliki nilai yang ditetapkan. Untuk diagram ini, hanya satu entitas yang dapat dipilih pada waktu tertentu. Extended description

Jenis Pengembalian: Array elemen pilihan
setSelection()

Memilih entitas diagram yang ditentukan. Membatalkan pilihan sebelumnya. Entitas yang dapat dipilih adalah wilayah yang memiliki nilai yang ditetapkan. Untuk diagram ini, hanya satu entitas yang dapat dipilih pada satu waktu. Extended description

Jenis Pengembalian: tidak ada

Acara

Name
error

Diaktifkan saat terjadi error saat mencoba merender diagram.

Properties: id, pesan
ready

Diagram siap untuk panggilan metode eksternal. Jika ingin berinteraksi dengan diagram, dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode draw, dan memanggilnya hanya setelah peristiwa diaktifkan.

Properti: tidak ada
regionClick

Dipanggil saat wilayah diklik. Nilai ini tidak akan ditampilkan untuk negara tertentu yang ditetapkan dalam opsi 'wilayah' (jika negara tertentu tercantum).

Properties: Objek dengan satu properti, region, yang merupakan string dalam format ISO-3166 yang mendeskripsikan wilayah yang diklik.
select

Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil getSelection().

Properti: tidak ada

Kebijakan data

Lokasi di-geocode oleh Google Maps. Data apa pun yang tidak memerlukan geocoding tidak akan dikirim ke server mana pun. Lihat Persyaratan Layanan Google Maps untuk mengetahui informasi selengkapnya tentang kebijakan data mereka.