Visualisasi: GeoChart

  1. Ringkasan
  2. Diagram Geografis Wilayah
  3. GeoChart Penanda
  4. GeoChart Teks
  5. Mewarnai diagram
  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 dengan salah satu dari tiga cara berikut:

  • Mode wilayah mewarnai seluruh wilayah, seperti negara, provinsi, atau negara bagian.
  • Mode penanda menggunakan lingkaran untuk menetapkan wilayah yang diskalakan sesuai dengan nilai yang Anda tentukan.
  • Mode teks memberi label pada wilayah dengan ID (misalnya, "Rusia" atau "Asia").

Diagram geografis dirender dalam browser menggunakan SVG atau VML. Perhatikan bahwa geochart tidak dapat di-scroll atau ditarik, dan ini adalah gambar garis, bukan peta medan; jika Anda menginginkannya, pertimbangkan 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 geochart, dengan warna dan ukuran yang ditentukan.
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 yang lebih lama.)

<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 ingin menampilkan nilai penanda positif (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. Semua populasi adalah angka absolut (misalnya, 65 juta untuk Prancis), tetapi area tersebut merupakan persentase keseluruhan: penanda Prancis berwarna ungu karena populasinya menengah, tetapi berukuran 50 (dari kemungkinan 100) karena berisi 50% area gabungan.

Dalam kode ini, kami menggunakan sizeAxis untuk menentukan ukuran penanda dalam rentang dari 0 hingga 100. Kami juga menggunakan colorAxis dengan nilai RGB untuk menampilkan populasi sebagai rentang warna mulai dari oranye hingga biru, spektrum yang akan berfungsi dengan baik bagi pengguna dengan defisit penglihatan warna. Terakhir, kita akan menentukan 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 ke diagram geografis dengan displayMode: text.

Data & amp; 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 untuk diagram.
  • datalessRegionColor: warna yang akan ditetapkan ke wilayah tanpa data terkait.
  • defaultColor: warna yang akan ditetapkan ke region dalam tabel yang nilainya null atau tidak ditentukan.

Opsi colorAxis adalah 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 warna tersebut.

Dalam diagram berikut, kita akan menggunakan keempat opsi. colorAxis digunakan untuk menampilkan Afrika dengan warna bendera pan-Afrika, menggunakan garis lintang negara: dari merah di utara, melalui hitam, ke hijau di selatan. Opsi backgroundColor digunakan untuk mewarnai latar belakang dengan warna biru muda, datalessRegionColor untuk mewarnai negara-negara non-Afrika dengan warna merah muda cerah, 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 bahwa Anda tidak boleh menyalin mapsApiKey; cara ini tidak akan berhasil. Selama diagram Anda tidak memerlukan geocoding atau menggunakan kode non-standar untuk mengidentifikasi lokasi, Anda tidak memerlukan mapsApiKey. Untuk detail selengkapnya, lihat Setelan Pemuatan. 

  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 wilayah

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

  1. Lokasi wilayah [String, Wajib] - Region yang akan disorot. 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 teks bahasa Inggris yang setara (misalnya, "GB" atau "Inggris Raya").
    • Nama kode wilayah ISO-3166-2 huruf besar atau teks Inggris yang setara (misalnya, "US-NJ" atau "New Jersey").
    • Kode area metropolitan. Ini adalah kode metro tiga digit yang digunakan untuk menetapkan berbagai wilayah; kode AS hanya didukung. Perhatikan bahwa 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 ke wilayah ini, berdasarkan skala yang ditentukan di properti colorAxis.colors. Jika kolom ini tidak ada, semua wilayah akan memiliki warna yang sama. Jika kolom tersebut ada, nilai null tidak diizinkan. Nilai diskalakan secara relatif terhadap nilai sizeAxis.minValue/sizeAxis.maxValue, atau ke nilai yang ditentukan dalam properti colorAxis.values, jika diberikan.

Format mode penanda

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

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

    ATAU

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

    Catatan: Meskipun kami merekomendasikan kode ISO 3166 untuk digunakan pada mode 'region', mode 'penanda' akan berfungsi paling baik dengan nama yang lebih panjang untuk wilayah (seperti Jerman, Panama, dll). Hal ini karena geochart, saat dalam mode 'penanda', menggunakan Google Maps untuk melakukan geocoding terhadap lokasi (mengonversi lokasi string menjadi garis lintang dan bujur). Hal ini dapat menyebabkan lokasi ambigu tidak di-geocoding seperti yang Anda harapkan; seperti 'DE' sebagai singkatan dari Jerman atau Delaware, atau 'PA' sebagai 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 tersebut ada, nilai null tidak diizinkan. Nilai diskalakan secara relatif terhadap satu sama lain, atau benar-benar sesuai nilai yang ditentukan dalam properti colorAxis.values.
  • Ukuran penanda [Angka, Opsional] Kolom numerik opsional yang digunakan untuk menetapkan ukuran penanda, relatif terhadap 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 tersebut 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 berukuran 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 garis batas diagram, sebagai string warna HTML.

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

Lebar pembatas, dalam piksel.

Jenis: angka
Default: 0
Sumbu warna

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 ditunjukkan di sini: 

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

Jika ada, menentukan 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: angka
Default: Nilai minimum kolom warna dalam data diagram
colorAxis.maxValue

Jika ada, menentukan 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: angka
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 di 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 yang akan ditetapkan ke nilai dalam visualisasi. Array string, dengan setiap elemen adalah string warna HTML, misalnya: colorAxis: {colors:['red','#004411']}. Anda harus memiliki minimal dua nilai; gradien akan mencakup semua nilai, ditambah nilai perantara yang dihitung, dengan warna pertama sebagai nilai terkecil, dan warna terakhir sebagai tertinggi.

Jenis: array string warna
Default: null
DataRegionRegionColor

Warna untuk ditetapkan ke wilayah tanpa data terkait.

Jenis: string
Default: '#F5F5F5'
warnadefault

Warna yang akan digunakan untuk titik data dalam diagram geografis saat lokasi (misalnya, 'US' ) ada tetapi nilainya adalah null atau tidak ditentukan. Ini berbeda dengan datalessRegionColor, yang merupakan warna yang digunakan saat data tidak ada.

Jenis: string
Default: '#267114'
mode tampilan

Jenis diagram geografis ini. Format DataTable harus sesuai dengan nilai yang ditentukan. Nilai-nilai berikut ini didukung:

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

Menampilkan diagram geografis seolah-olah sedang ditayangkan dari wilayah ini. Misalnya, menetapkan domain ke 'IN' akan menampilkan Kashmir sebagai milik India, bukan sebagai wilayah yang disengketakan.

Jenis: string
Default: null
enableRegionInteraktivitas

Jika true (benar), aktifkan interaktivitas wilayah, termasuk elaborasi fokus dan tooltip saat mengarahkan kursor mouse, serta pemilihan dan pengaktifan region dan select pada peristiwa regionClick saat klik mouse.

Defaultnya adalah benar dalam mode wilayah, dan salah dalam mode penanda.

Jenis: boolean
Default: otomatis
forceIFrame

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

Jenis: boolean
Default: false (salah)
GeochartVersion

Versi data batas GeoChart. Versi 10 dan 11 tersedia.

Jenis: angka
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: angka
Default: otomatis
keepAspectRatio

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

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

Jenis: boolean
Default: true (benar):
legenda

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

 {textStyle: {color: 'blue', fontSize: 16}}
Jenis: Objek / 'tidak ada'
Default: null
legenda.nomorFormat

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
legenda.teksGaya

Objek yang menentukan 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.

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

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

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

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}
kaca pembesar.enable

Jika benar, saat pengguna berlama-lama di penanda yang berantakan, kaca pembesar akan terbuka.

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

Jenis: boolean
Default: true (benar):
kaca pembesar.zoomFaktor

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

Jenis: angka
Default: 5,0
penanda opasitas

Opasitas penanda, di mana 0,0 sepenuhnya transparan dan 1,0 sepenuhnya buram.

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

Versi data region coder. Versi 0 dan 1 tersedia.

Jenis: angka
Default:0
resolusi

Resolusi batas geochart. Pilih salah satu nilai berikut:

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

Objek dengan anggota untuk mengonfigurasi bagaimana 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}
Objek Type:
Default: null
sizeAxis.maxSize

Radius maksimum balon yang memungkinkan, dalam piksel.

Jenis: angka
Default: 12
sizeAxis.maxValue

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

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

Radius minimum balon terkecil yang mungkin, dalam piksel.

Jenis: angka
Default: 3
sizeAxis.minValue

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

Jenis: angka
Default: Nilai minimum kolom ukuran di data diagram
tooltip

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
Objek Type:
Default: null
tooltip.teksGaya

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.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.pemicu

Interaksi pengguna yang menyebabkan tooltip ditampilkan:

  • 'fokus' - Tooltip akan ditampilkan saat pengguna mengarahkan kursor ke elemen.
  • 'tidak ada' - 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 true - dalam hal ini lebar tersebut akan dihitung sebagaimana mestinya.

Jenis: angka
Default: otomatis

 

Hierarki dan Kode Benua

Diagram geografis/benua dapat ditampilkan dengan menetapkan opsi region ke salah satu kode 3 digit berikut. Kode dan hierarki 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, LR, ML, MR, ML,
017 - Afrika Tengah AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 - Afrika Timur . seperti ini s.j. s.2.000.s. kita sudah tidak ada hal yang sebelumnya. . seperti itu.
018 - Afrika Selatan BW, LS, NA, SZ, ZA
150 - Eropa 154 - Eropa Utara GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, IS, IM
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 2019
013 - Amerika Tengah BZ, CR, GT, HN, MX, NI, PA, SV
005 - Amerika Selatan
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, {25,}
145 - Asia Barat Di Sem
009 - Oseania 053 - Australia dan Selandia Baru Australia, 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()

Menghapus diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Hasil: tidak ada
draw(data, options)

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

Jenis Hasil: tidak ada
getImageURI()

Menampilkan diagram yang diserialisasi sebagai URI gambar.

Panggil ini setelah diagram digambar.

Lihat Mencetak Diagram PNG.

Jenis Hasil: string
getSelection()

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

Jenis Hasil: Array elemen pilihan
setSelection()

Memilih entitas diagram yang ditentukan. Membatalkan pilihan sebelumnya. Entitas yang dapat dipilih adalah region dengan nilai yang ditetapkan. Untuk diagram ini, hanya satu entitas yang dapat dipilih sekaligus. Extended description

Jenis Hasil: tidak ada

Acara

Name
error

Dipicu jika 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 region diklik. Nomor ini tidak akan ditampilkan untuk negara tertentu yang ditetapkan dalam opsi 'wilayah' (jika negara tertentu tercantum).

Properti: Objek dengan satu properti, region, yang merupakan string dalam format ISO-3166 yang menjelaskan region yang diklik.
select

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

Properti: tidak ada

Kebijakan data

Lokasi di-geocoding 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.