Halaman ini diterjemahkan oleh Cloud Translation API.

Visualisasi: GeoChart

Ringkasan
GeoChart Wilayah
GeoChart Penanda
GeoChart Teks
Mewarnai diagram Anda
Memuat
Format data
Opsi konfigurasi
Metode
Peristiwa
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.

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

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:

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.
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 NE SH SL SN
	`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, RW SC SO TZ UG
	`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 . . . . . . . .BB CU DM GD GP LC MS
	`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, PYSR VE
`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.