การแสดงภาพ: แผนภูมิภูมิศาสตร์

  1. ภาพรวม
  2. แผนภูมิภูมิศาสตร์ระดับภูมิภาค
  3. แผนภูมิภูมิศาสตร์ของ Marker
  4. แผนภูมิภูมิศาสตร์แบบข้อความ
  5. การระบายสีแผนภูมิ
  6. กำลังโหลด
  7. รูปแบบข้อมูล
  8. ตัวเลือกการกำหนดค่า
  9. เมธอด
  10. เหตุการณ์
  11. นโยบายข้อมูล

ภาพรวม

ภูมิศาสตร์คือแผนที่ของประเทศ ทวีป หรือภูมิภาคหนึ่งๆ โดยมีพื้นที่ที่ระบุด้วยวิธีใดวิธีหนึ่งใน 3 วิธีต่อไปนี้

  • โหมด region จะใช้สีสำหรับทั้งภูมิภาค เช่น ประเทศ จังหวัด หรือรัฐ
  • โหมด markers จะใช้วงกลมเพื่อระบุพื้นที่ซึ่งมีการปรับขนาดตามค่าที่คุณระบุ
  • โหมด text จะติดป้ายกำกับภูมิภาคด้วยตัวระบุ (เช่น "รัสเซีย" หรือ "เอเชีย")

แผนภูมิภูมิศาสตร์จะแสดงผลภายในเบราว์เซอร์โดยใช้ SVG หรือ VML โปรดทราบว่าแผนภูมิภูมิศาสตร์เลื่อนหรือลากไม่ได้ และจะเป็นภาพวาดลายเส้นไม่ใช่แผนที่ภูมิประเทศ ถ้าต้องการข้อมูลลักษณะนี้ ให้ลองใช้การแสดงภาพแผนที่แทน

แผนภูมิภูมิศาสตร์ระดับภูมิภาค

รูปแบบ regions จะแสดงสีที่สอดคล้องกับค่าที่คุณกำหนดในทุกภูมิภาค (โดยทั่วไปจะเป็นประเทศ) ด้วย

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

แผนภูมิภูมิศาสตร์ของมาร์กเกอร์

รูปแบบ markers จะแสดงวงกลมที่ตำแหน่งที่เจาะจงบนแผนภูมิภูมิศาสตร์ โดยมีสีและขนาดที่คุณระบุ
ลองวางเมาส์เหนือเครื่องหมายระเกะระกะรอบๆ กรุงโรม แล้วแว่นขยายจะเปิดขึ้นเพื่อแสดงเครื่องหมายอย่างละเอียดมากขึ้น (ไม่รองรับแว่นขยายใน Internet Explorer เวอร์ชัน 8 หรือเก่ากว่า)

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

การแสดงเครื่องหมายตามสัดส่วน

โดยปกติ แผนภูมิภูมิศาสตร์ของเครื่องหมายจะแสดงค่าเครื่องหมายที่มีขนาดเล็กที่สุดเป็นจุดต่ำสุด หากคุณต้องการแสดงค่าเครื่องหมายตามสัดส่วน (เช่น เพราะเป็นเปอร์เซ็นต์) ให้ใช้ตัวเลือก sizeAxis เพื่อตั้งค่า minValue และ maxValue อย่างชัดเจน

ตัวอย่างเช่น แผนที่ยุโรปตะวันตกพร้อมประชากรและพื้นที่ของ 3 ประเทศ ได้แก่ ฝรั่งเศส เยอรมนี และโปแลนด์ จํานวนประชากรจะเป็นจํานวนสัมบูรณ์ทั้งหมด (เช่น 65 ล้านสำหรับฝรั่งเศส) แต่พื้นที่เป็นเปอร์เซ็นต์ของทั้งหมด เครื่องหมายของฝรั่งเศสเป็นสีม่วงเนื่องจากมีจำนวนประชากรอยู่ระหว่างกลาง แต่มีขนาดอยู่ที่ 50 (จาก 100 รายการที่เป็นไปได้) เนื่องจากมีพื้นที่ 50% ของพื้นที่รวมกัน

ในโค้ดนี้ เราใช้ sizeAxis เพื่อระบุขนาดเครื่องหมายในช่วงตั้งแต่ 0 ถึง 100 นอกจากนี้ เรายังใช้ colorAxis ที่มีค่า RGB เพื่อแสดงประชากรในช่วงสีต่างๆ ตั้งแต่สีส้มไปจนถึงสีน้ำเงิน ซึ่งเป็นสเปกตรัมที่จะทำงานได้ดีสำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็นสี สุดท้าย เราระบุยุโรปตะวันตกด้วย region เท่ากับ 155 ในหัวข้อ "ลำดับชั้นของเนื้อหาและโค้ด" ที่ต่อไปในเอกสารนี้

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

แผนภูมิภูมิศาสตร์แบบข้อความ

คุณสามารถวางซ้อนป้ายกำกับข้อความบนแผนภูมิภูมิศาสตร์ด้วย displayMode: text

ข้อมูลและตัวเลือก
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['South America', 600],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['Australia', 600]
  ]);

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

การระบายสีแผนภูมิ

มีหลายตัวเลือกสำหรับการกำหนดค่าสีของ GeoCharts:

  • colorAxis: สเปกตรัมของสีที่ใช้สำหรับภูมิภาคในตารางข้อมูล
  • backgroundColor: สีพื้นหลังของแผนภูมิ
  • datalessRegionColor: สีที่จะกำหนดให้กับภูมิภาคที่ไม่มีข้อมูลที่เกี่ยวข้อง
  • defaultColor: สีที่จะกำหนดให้กับภูมิภาคในตารางข้อมูลซึ่งมีค่าเป็น null หรือไม่ได้ระบุ

ตัวเลือก colorAxis คือตัวเลือกสำคัญ เพราะจะช่วยระบุช่วงสีสำหรับค่าข้อมูลของคุณ ในอาร์เรย์ colorAxis องค์ประกอบแรกคือสีที่ให้กับค่าที่น้อยที่สุดในชุดข้อมูล และองค์ประกอบสุดท้ายคือสีที่กำหนดให้ค่าที่มากที่สุดในชุดข้อมูล ถ้าคุณระบุมากกว่า 2 สี การประมาณค่าในช่วงสีจะเกิดขึ้น

ในแผนภูมิต่อไปนี้ เราจะใช้ทั้ง 4 ตัวเลือก colorAxis ใช้เพื่อแสดงแอฟริกาด้วยสีของธงชาติแอฟริกา โดยใช้ละติจูดของประเทศต่างๆ ตั้งแต่สีแดงทางเหนือ สีดำ สีเขียว ในทางใต้ ตัวเลือก backgroundColor ใช้เพื่อแต่งแต้มพื้นหลังสีฟ้าอ่อน datalessRegionColor เพื่อเติมสีประเทศที่ไม่ใช่แอฟริกาเป็นสีชมพูอ่อน และ defaultColor สำหรับมาดากัสการ์
ตัวเลือก
        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };
หน้าเว็บแบบเต็ม
<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>

กำลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "geochart" โปรดทราบว่าคุณไม่ควรคัดลอก mapsApiKey ของเรา เนื่องจากจะใช้งานไม่ได้ ตราบใดที่แผนภูมิของคุณไม่ได้กำหนดพิกัดทางภูมิศาสตร์หรือใช้รหัสที่ไม่ใช่มาตรฐานเพื่อระบุสถานที่ตั้ง คุณก็ไม่จำเป็นต้องใช้ mapsApiKey โปรดดูรายละเอียดเพิ่มเติมที่ โหลดการตั้งค่า 

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

ชื่อคลาสการแสดงภาพแผนภูมิภูมิศาสตร์คือ google.visualization.GeoChart 

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

รูปแบบข้อมูล

รูปแบบของ DataTable จะแตกต่างกันไปขึ้นอยู่กับโหมดการแสดงผลที่คุณใช้ ได้แก่ regions, markers หรือ text

รูปแบบโหมดภูมิภาค

ป้อนสถานที่ตั้งลงใน 1 คอลัมน์และคอลัมน์ที่ไม่บังคับ 1 คอลัมน์ตามที่อธิบายไว้ที่นี่

  1. ตำแหน่งภูมิภาค [สตริง, ต้องระบุ] - ภูมิภาคที่จะไฮไลต์ ระบบยอมรับรูปแบบต่อไปนี้ทั้งหมด คุณใช้รูปแบบต่างๆ ได้ในแถวต่างๆ ดังนี้
    • ชื่อประเทศเป็นสตริง (เช่น "อังกฤษ") หรือรหัส ISO-3166-1 alpha-2 ตัวพิมพ์ใหญ่ หรือข้อความภาษาอังกฤษที่เทียบเท่า (เช่น "GB" หรือ "สหราชอาณาจักร")
    • ชื่อรหัสภูมิภาค ISO-3166-2 ตัวพิมพ์ใหญ่หรือข้อความภาษาอังกฤษ (เช่น "US-NJ" หรือ "นิวเจอร์ซีย์")
    • รหัสพื้นที่ในเมืองใหญ่ รหัสเมืองใหญ่ 3 หลักเหล่านี้ใช้สำหรับกำหนดภูมิภาคต่างๆ ซึ่งรองรับเฉพาะรหัสของสหรัฐอเมริกาเท่านั้น โปรดทราบว่ารหัสเหล่านี้ไม่เหมือนกับรหัสพื้นที่ของโทรศัพท์
    • ค่าใดก็ได้ที่พร็อพเพอร์ตี้ region รองรับ
  2. สีของภูมิภาค [ตัวเลข, ไม่บังคับ] - คอลัมน์ตัวเลขซึ่งไม่บังคับที่ใช้เพื่อกำหนดสีให้กับภูมิภาคนี้ โดยอิงตามมาตราส่วนที่ระบุไว้ในพร็อพเพอร์ตี้ colorAxis.colors หากไม่มีคอลัมน์นี้ ภูมิภาคทั้งหมดจะเป็นสีเดียวกัน หากมีคอลัมน์ ไม่อนุญาตให้ใช้ค่า Null ค่าจะมีการปรับขนาดเทียบกับค่า sizeAxis.minValue/sizeAxis.maxValue หรือกับค่าที่ระบุในพร็อพเพอร์ตี้ colorAxis.values หากระบุ

รูปแบบโหมดเครื่องหมาย

จำนวนคอลัมน์จะแตกต่างกันไปโดยขึ้นอยู่กับรูปแบบเครื่องหมายที่ใช้ รวมถึงคอลัมน์ที่ไม่บังคับอื่นๆ

  • ตำแหน่งเครื่องหมาย [ต้องระบุ]
    คอลัมน์แรกเป็นที่อยู่สตริงที่เจาะจง (เช่น "1600 Pennsylvania Ave")

    หรือ

    2 คอลัมน์แรกเป็นตัวเลข โดยคอลัมน์แรกคือละติจูด และคอลัมน์ที่ 2 คือลองจิจูด

    หมายเหตุ: แม้ว่าเราจะแนะนำให้ใช้รหัส ISO 3166 สำหรับโหมด "ภูมิภาค" แต่โหมด "เครื่องหมาย" จะทำงานได้ดีที่สุดกับชื่อที่ยาวขึ้นสำหรับภูมิภาคต่างๆ (เช่น เยอรมนี ปานามา ฯลฯ) เนื่องจากเมื่ออยู่ในโหมด "เครื่องหมาย" ใช้ Google Maps สำหรับการระบุพิกัดทางภูมิศาสตร์ให้กับตำแหน่ง (แปลงตำแหน่งสตริงเป็นละติจูดและลองจิจูด) ซึ่งอาจส่งผลให้สถานที่ไม่ชัดเจนไม่ได้รับการเข้ารหัสพิกัดภูมิศาสตร์ตามที่คุณคาดไว้ เช่น "DE" คืออันดับของเยอรมนีหรือเดลาแวร์ หรือ "PA" คือปานามาหรือเพนซิลเวเนีย

  • สีของเครื่องหมาย [ตัวเลข, ไม่บังคับ] คอลัมน์ถัดไปเป็นคอลัมน์ตัวเลขซึ่งไม่บังคับที่ใช้เพื่อกำหนดสีให้กับเครื่องหมายนี้ โดยอิงตามมาตราส่วนที่ระบุไว้ในพร็อพเพอร์ตี้ colorAxis.colors หากไม่มีคอลัมน์นี้ เครื่องหมายทั้งหมดจะมีสีเดียวกัน หากมีคอลัมน์ ไม่อนุญาตให้ใช้ค่า Null ค่าจะมีการปรับขนาดเปรียบเทียบกัน หรือแบบสัมบูรณ์กับค่าที่ระบุในพร็อพเพอร์ตี้ colorAxis.values
  • ขนาดตัวทำเครื่องหมาย [ตัวเลข, ไม่บังคับ] คอลัมน์ตัวเลขซึ่งไม่บังคับที่ใช้เพื่อกำหนดขนาดของเครื่องหมาย โดยสัมพันธ์กับขนาดเครื่องหมายอื่นๆ หากไม่มีคอลัมน์นี้ ระบบจะใช้ค่าจากคอลัมน์ก่อนหน้า (หรือขนาดเริ่มต้น หากไม่ได้ระบุคอลัมน์สี) หากมีคอลัมน์ ไม่อนุญาตให้ใช้ค่า Null

รูปแบบโหมดข้อความ

ป้ายกำกับจะป้อนในคอลัมน์แรกและอีกคอลัมน์ที่ไม่บังคับ 1 คอลัมน์ ดังนี้

  • ป้ายกำกับข้อความ [สตริง, ต้องระบุ] ที่อยู่สตริงที่เจาะจง (เช่น "1600 Pennsylvania Ave")
  • ขนาดข้อความ [ตัวเลข, ไม่บังคับ] คอลัมน์ที่ 2 เป็นคอลัมน์ตัวเลขที่ไม่บังคับซึ่งใช้เพื่อกำหนดขนาดของป้ายกำกับ หากไม่มีคอลัมน์นี้ ป้ายกำกับทั้งหมดจะมีขนาดเท่ากัน

ตัวเลือกการกำหนดค่า

ชื่อ
backgroundColor

สีพื้นหลังสำหรับพื้นที่หลักของแผนภูมิ อาจเป็นสตริงสี HTML แบบง่าย เช่น 'red' หรือ '#00cc00' หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้

ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: สีขาว
backgroundColor.fill

สีเติมแผนภูมิ เป็นสตริงสี HTML

ประเภท: สตริง
ค่าเริ่มต้น: สีขาว
backgroundColor.stroke

สีเส้นขอบของแผนภูมิ เป็นสตริงสี HTML

ประเภท: สตริง
ค่าเริ่มต้น: "#666"
backgroundColor.strokeWidth

ความกว้างของขอบเป็นพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
colorAxis

ออบเจ็กต์ที่ระบุการแมประหว่างค่าคอลัมน์สีกับสีหรือสเกลการไล่ระดับสี หากต้องการระบุคุณสมบัติของออบเจ็กต์นี้ คุณสามารถใช้รูปแบบลิเทอรัลของออบเจ็กต์ดังที่แสดงไว้ที่นี่ 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
colorAxis.minValue

หากมี ให้ระบุค่าขั้นต่ำสำหรับข้อมูลสีแผนภูมิ ค่าข้อมูลสีของค่านี้และค่าที่ต่ำกว่าจะแสดงผลเป็นสีแรกในช่วง colorAxis.colors

ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าขั้นต่ำของคอลัมน์สีในข้อมูลแผนภูมิ
colorAxis.maxValue

หากมี ให้ระบุค่าสูงสุดสำหรับข้อมูลสีแผนภูมิ ค่าข้อมูลสีของค่านี้และที่สูงกว่าจะแสดงเป็นสีสุดท้ายในช่วง colorAxis.colors

ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าสูงสุดของคอลัมน์สีในข้อมูลแผนภูมิ
colorAxis.values

หากมี ให้ควบคุมการเชื่อมโยงค่ากับสี แต่ละค่าจะเชื่อมโยงกับสีที่สอดคล้องกันในอาร์เรย์ colorAxis.colors ค่าเหล่านี้จะมีผลกับข้อมูลสีของแผนภูมิ การลงสีจะเป็นไปตามการไล่ระดับสีของค่าที่ระบุที่นี่ การไม่ระบุค่าสำหรับตัวเลือกนี้เทียบเท่ากับการระบุ [minValue, maxValue]

ประเภท: อาร์เรย์ของตัวเลข
ค่าเริ่มต้น: null
colorAxis.colors

สีที่จะกําหนดให้กับค่าในการแสดงภาพ อาร์เรย์ของสตริง โดยที่องค์ประกอบแต่ละรายการเป็นสตริงสี HTML เช่น colorAxis: {colors:['red','#004411']} คุณต้องมีค่าอย่างน้อย 2 ค่า การไล่ระดับสีจะรวมค่าทั้งหมด บวกค่ากลางที่คำนวณแล้ว โดยสีแรกเป็นค่าเล็กที่สุด และสีสุดท้ายเป็นค่าสูงสุด

ประเภท: อาร์เรย์ของสตริงสี
ค่าเริ่มต้น: null
datalessRegionColor

สีที่จะกำหนดให้กับภูมิภาคที่ไม่มีข้อมูลที่เกี่ยวข้อง

ประเภท: สตริง
ค่าเริ่มต้น: "#F5F5F5"
defaultColor

สีที่จะใช้เมื่อเป็นจุดข้อมูลในแผนภูมิภูมิศาสตร์เมื่อตำแหน่งนั้น (เช่น 'US' ) แต่มีค่าเป็น null หรือไม่ได้ระบุ ค่านี้แตกต่างจาก datalessRegionColor ซึ่งเป็นสีที่ใช้เมื่อไม่มีข้อมูล

ประเภท: สตริง
ค่าเริ่มต้น: "#267114"
displayMode

นี่คือประเภทของแผนภูมิภูมิศาสตร์ รูปแบบ DataTable ต้องตรงกับค่าที่ระบุ ระบบรองรับค่าต่อไปนี้

  • "auto" - เลือกตามรูปแบบของตารางข้อมูล
  • "ภูมิภาค" - กำหนดสีภูมิภาคบนแผนภูมิภูมิศาสตร์
  • "markers" - วางเครื่องหมายในพื้นที่
  • "text" - ติดป้ายกำกับภูมิภาคด้วยข้อความจากตารางข้อมูล
ประเภท: สตริง
ค่าเริ่มต้น: "auto"
โดเมน

แสดงแผนภูมิภูมิศาสตร์เสมือนกับการให้บริการจากภูมิภาคนี้ ตัวอย่างเช่น การตั้งค่า domain เป็น 'IN' จะแสดงว่าแคชเมียร์เป็นพื้นที่ของประเทศอินเดีย แทนที่จะเป็นเขตแดนที่มีข้อพิพาท

ประเภท: สตริง
ค่าเริ่มต้น: null
enableRegionInteractivity

หากเป็น "จริง" ให้เปิดใช้การโต้ตอบของภูมิภาค ซึ่งรวมถึงการโฟกัสและการอธิบายอย่างละเอียดสำหรับเคล็ดลับเครื่องมือเมื่อวางเมาส์เหนือ การเลือกภูมิภาคและการเริ่มทำงานของเหตุการณ์ regionClick และ select เมื่อคลิกเมาส์

ค่าเริ่มต้นคือจริงในโหมดภูมิภาค และเท็จในโหมดเครื่องหมาย

ประเภท: บูลีน
ค่าเริ่มต้น: อัตโนมัติ
forceIFrame

วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ตัวเลือกนี้จะถูกละเว้น และแผนภูมิ IE8 ทั้งหมดวาดใน i-frame)

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
geochartVersion

เวอร์ชันของข้อมูลเส้นขอบ GeoChart มีเวอร์ชัน 10 และ 11 พร้อมให้ใช้งาน

ประเภท: ตัวเลข
ค่าเริ่มต้น:10
ส่วนสูง

ความสูงของการแสดงภาพ หน่วยเป็นพิกเซล ความสูงเริ่มต้นคือ 347 พิกเซล เว้นแต่จะระบุตัวเลือก width และกำหนด keepAspectRatio เป็น true ซึ่งในกรณีนี้จะมีการคำนวณความสูงให้สอดคล้องกัน

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
keepAspectRatio

หากจริง ระบบจะวาดแผนภูมิภูมิศาสตร์ในขนาดที่ใหญ่ที่สุดซึ่งพอดีกับพื้นที่ของแผนภูมิในสัดส่วนภาพตามธรรมชาติ หากระบุไว้เพียงตัวเลือกเดียวจาก width และ height ระบบจะคำนวณอีกตัวเลือกหนึ่งตามสัดส่วนภาพ

หากเป็นเท็จ แผนภูมิภูมิศาสตร์จะขยายเท่ากับขนาดที่แน่นอนของแผนภูมิตามที่ระบุโดยตัวเลือก width และ height

ประเภท: บูลีน
ค่าเริ่มต้น: true
คำอธิบาย

ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าแง่มุมต่างๆ ของคำอธิบาย หรือ "ไม่มี" หากไม่มีคำอธิบายควรปรากฏขึ้น หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบลิเทอรัลของออบเจ็กต์ได้ดังที่แสดงที่นี่ 

 {textStyle: {color: 'blue', fontSize: 16}}
ประเภท: ออบเจ็กต์ / "none"
ค่าเริ่มต้น: null
legend.numberFormat

สตริงรูปแบบสำหรับป้ายกำกับตัวเลข นี่คือชุดย่อยของ ชุดรูปแบบ ICU เช่น {numberFormat:'.##'} จะแสดงค่า "10.66", "10.6" และ "10.0" สำหรับค่า 10.666, 10.6 และ 10

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
legend.textStyle

ออบเจ็กต์ที่ระบุรูปแบบข้อความคำอธิบาย ออบเจ็กต์มีรูปแบบดังนี้

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

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' ดู fontName และ fontSize ด้วย

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
ภูมิภาค

พื้นที่ที่จะแสดงบนแผนภูมิภูมิศาสตร์ (พื้นที่ใกล้เคียงจะปรากฏขึ้นด้วย) อาจเป็นอย่างใดอย่างหนึ่งต่อไปนี้

  • "โลก" - แผนภูมิภูมิศาสตร์ของโลก
  • ทวีปหรืออนุทวีปที่ระบุโดยรหัส 3 หลักของทวีปนั้นๆ เช่น "011" สำหรับแอฟริกาตะวันตก
  • ประเทศที่ระบุโดยรหัส ISO 3166-1 alpha-2 เช่น "AU" สำหรับออสเตรเลีย
  • รัฐในสหรัฐอเมริกา ซึ่งระบุด้วยรหัส ISO 3166-2:US เช่น "US-AL" สำหรับแอละแบมา โปรดทราบว่าต้องตั้งค่าตัวเลือก resolution เป็น "จังหวัด" หรือ "เมืองใหญ่"
ประเภท: สตริง
ค่าเริ่มต้น: "ทั่วโลก"
magnifyingGlass

วัตถุที่มีสมาชิกซึ่งกำหนดค่าลักษณะต่างๆ ของแว่นขยาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบลิเทอรัลของออบเจ็กต์ได้ดังที่แสดงที่นี่ 

{enable: true, zoomFactor: 7.5}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

หากเป็น "จริง" เมื่อผู้ใช้วางอยู่บนเครื่องหมายระเกะระกะ กระจกแว่นขยายจะเปิดขึ้น

หมายเหตุ: ฟีเจอร์นี้ไม่รองรับในเบราว์เซอร์ที่ไม่รองรับ SVG เช่น Internet Explorer เวอร์ชัน 8 หรือเก่ากว่า

ประเภท: บูลีน
ค่าเริ่มต้น: true
magnifyingGlass.zoomFactor

ปัจจัยการซูมของแว่นขยาย อาจเป็นตัวเลขใดก็ได้ที่มากกว่า 0

ประเภท: ตัวเลข
ค่าเริ่มต้น: 5.0
markerOpacity

ความทึบแสงของเครื่องหมาย โดย 0.0 หมายถึงโปร่งแสงเต็มที่ และ 1.0 หมายถึงทึบแสงเต็มที่

ประเภท: ตัวเลข 0.0-1.0
ค่าเริ่มต้น: 1.0
regioncoderVersion

เวอร์ชันของข้อมูลรหัสภูมิภาค มีเวอร์ชัน 0 และ 1 พร้อมให้ใช้งาน

ประเภท: ตัวเลข
ค่าเริ่มต้น:0
ความละเอียด

ความละเอียดของเส้นขอบแผนภูมิภูมิศาสตร์ เลือกค่าใดค่าหนึ่งต่อไปนี้

  • "ประเทศ" - รองรับทุกภูมิภาค ยกเว้นภูมิภาคในสหรัฐอเมริกา
  • "จังหวัด" - รองรับเฉพาะภูมิภาคประเทศและภูมิภาคของรัฐในสหรัฐฯ ไม่รองรับบางประเทศ โปรดทดสอบประเทศเพื่อดูว่าระบบรองรับตัวเลือกนี้หรือไม่
  • "เมืองใหญ่" - รองรับในภูมิภาคของประเทศสหรัฐอเมริกาและภูมิภาคของรัฐในสหรัฐอเมริกาเท่านั้น
ประเภท: สตริง
ค่าเริ่มต้น: "ประเทศ"
sizeAxis

ออบเจ็กต์ที่มีสมาชิกเพื่อกำหนดค่าวิธีเชื่อมโยงค่ากับขนาดลูกโป่ง หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบลิเทอรัลของออบเจ็กต์ได้ดังที่แสดงที่นี่ 

 {minValue: 0,  maxSize: 20}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
sizeAxis.maxSize

รัศมีสูงสุดของลูกโป่งที่ใหญ่ที่สุดที่เป็นไปได้ หน่วยเป็นพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: 12
sizeAxis.maxValue

ค่าขนาด (ตามที่แสดงในข้อมูลแผนภูมิ) ที่จะแมปกับ sizeAxis.maxSize ระบบจะครอบตัดค่าที่มากกว่านี้เป็นค่านี้

ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าสูงสุดของคอลัมน์ขนาดในข้อมูลแผนภูมิ
sizeAxis.minSize

รัศมีต่ำสุดของลูกโป่งที่เล็กที่สุดในหน่วยพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: 3
sizeAxis.minValue

ค่าขนาด (ตามที่แสดงในข้อมูลแผนภูมิ) ที่จะแมปกับ sizeAxis.minSize ระบบจะครอบตัดค่าที่น้อยกว่านี้เป็นค่านี้

ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าต่ำสุดของคอลัมน์ขนาดในข้อมูลแผนภูมิ
เคล็ดลับเครื่องมือ

ออบเจ็กต์ที่มีสมาชิกเพื่อกำหนดค่าองค์ประกอบเคล็ดลับเครื่องมือที่หลากหลาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบลิเทอรัลของออบเจ็กต์ได้ดังที่แสดงที่นี่ 

{textStyle: {color: '#FF0000'}, showColorCode: true}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
tooltip.textStyle

ออบเจ็กต์ที่ระบุรูปแบบข้อความของเคล็ดลับเครื่องมือ ออบเจ็กต์มีรูปแบบดังนี้

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

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' ดู fontName และ fontSize ด้วย

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

การโต้ตอบของผู้ใช้ที่ทำให้เคล็ดลับเครื่องมือปรากฏขึ้น

  • "โฟกัส" - เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ
  • "none" - เคล็ดลับเครื่องมือจะไม่ปรากฏ
  • "selection" - เคล็ดลับเครื่องมือจะปรากฏขึ้นเมื่อผู้ใช้เลือกองค์ประกอบ
ประเภท: สตริง
ค่าเริ่มต้น: "โฟกัส"
ความกว้าง

ความกว้างของการแสดงภาพ หน่วยเป็นพิกเซล ความกว้างเริ่มต้นคือ 556 พิกเซล เว้นแต่จะระบุตัวเลือก height และตั้งค่า keepAspectRatio เป็น true ซึ่งในกรณีนี้ความกว้างจะคำนวณไปตามนั้น

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ

 

ลำดับชั้นและรหัสของทวีป

คุณแสดงแผนภูมิภูมิศาสตร์ของทวีป/ทวีปย่อยได้โดยตั้งค่าตัวเลือก region เป็นรหัส 3 หลักรายการใดรายการหนึ่งต่อไปนี้ รหัสและลำดับชั้นจะขึ้นอยู่กับรหัสและลำดับชั้นบนรหัสที่พัฒนาและดูแลโดย ฝ่ายสถิติของสหประชาชาติ โดยมีข้อยกเว้นบางประการ

ทวีป อนุทวีป ประเทศ
002 - แอฟริกา 015 - แอฟริกาเหนือ DZ, EG, EH, LY, MA, SD, SS, TN
011 - แอฟริกาตะวันตก BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, , , , , , SHSLSN
017 - แอฟริกากลาง AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 - แอฟริกาตะวันออก BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, , , , , , , , RWSCSOTZUG
018 - แอฟริกาใต้ BW, LS, NA, SZ, ZA
150 - ยุโรป 154 - ยุโรปเหนือ GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, ISLV
155 - ยุโรปตะวันตก AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL
151 - ยุโรปตะวันออก BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA
039 - ยุโรปใต้ AD, AL, BA, สเปน, GI, GR, HR, อิตาลี, ME, MK, MT, MT
019 - อเมริกา 021 - อเมริกาเหนือ BM, CA, GL, PM, สหรัฐอเมริกา
029 - แคริบเบียน AG, AI, AN, AW, BB, BL, BS, CU, DM, DO, GD,GPLCMS
013 - อเมริกากลาง BZ, CR, GT, HN, MX, NI, PA, SV
005 - อเมริกาใต้ AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY, PY, PYSRVE
142 - เอเชีย 143 - เอเชียกลาง TM, TJ, KG, KZ, UZ
030 - เอเชียตะวันออก CN, HK, ญี่ปุ่น, KP, KR, MN, MO, TW
034 - เอเชียใต้ AF, BD, BT, อินเดีย, IR, LK, MV, NP, PK
035 - เอเชียตะวันออกเฉียงใต้ BN, รหัส, KH, ลอสแอนเจลิส, MM, BU, มาเลเซีย, PH, SG, ไทย, TLVN
145 - เอเชียตะวันตก AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW, LB
009 - โอเชียเนีย 053 - ออสเตรเลียและนิวซีแลนด์ AU, NF, นิวซีแลนด์
054 - เมลานีเซีย FJ, NC, PG, SB, VU
057 - ไมโครนีเซีย FM, GU, KI, MH, MP, NR, PW
061 - โปลินีเซีย AS, CK, NU, PF, PN, TK, ถึง, ทีวี, WF, WS

วิธีการ

วิธีการ
clearChart()

ล้างแผนภูมิ และปล่อยทรัพยากรที่จัดสรรทั้งหมด

ประเภทการคืนสินค้า: ไม่มี
draw(data, options)

วาดแผนภูมิ แผนภูมิยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากที่เหตุการณ์ ready เริ่มทํางานแล้วเท่านั้น Extended description.

ประเภทการคืนสินค้า: ไม่มี
getImageURI()

แสดงผลแผนภูมิที่เรียงลำดับเป็น URI รูปภาพ

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ดูการพิมพ์แผนภูมิ PNG

ประเภทการแสดงผล: สตริง
getSelection()

แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก เอนทิตีที่เลือกได้คือภูมิภาคซึ่งมีค่าที่กำหนดไว้ สำหรับแผนภูมินี้ คุณสามารถเลือกเอนทิตีได้เพียง 1 รายการในช่วงเวลาหนึ่งๆ Extended description

ประเภทผลลัพธ์: อาร์เรย์ขององค์ประกอบการเลือก
setSelection()

เลือกเอนทิตีแผนภูมิที่ระบุ ยกเลิกรายการที่เลือกก่อนหน้า เอนทิตีที่เลือกได้คือภูมิภาคซึ่งมีค่าที่กำหนดไว้ สำหรับแผนภูมินี้ คุณสามารถเลือกเอนทิตีได้ครั้งละ 1 รายการเท่านั้น Extended description

ประเภทการคืนสินค้า: ไม่มี

กิจกรรม

ชื่อ
error

เริ่มทำงานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลแผนภูมิ

พร็อพเพอร์ตี้: รหัส ข้อความ
ready

แผนภูมิพร้อมสำหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น

พร็อพเพอร์ตี้: ไม่มี
regionClick

มีการเรียกเมื่อคลิกภูมิภาค โดยจะไม่มีการแสดงสำหรับประเทศที่กำหนดในตัวเลือก "ภูมิภาค" (หากมีการระบุชื่อประเทศที่เฉพาะเจาะจง)

พร็อพเพอร์ตี้: ออบเจ็กต์ที่มีพร็อพเพอร์ตี้เดียว ซึ่งก็คือ region ซึ่งเป็นสตริงในรูปแบบ ISO-3166 ที่อธิบายภูมิภาคที่คลิก
select

เริ่มทำงานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูสิ่งที่เลือก โปรดโทรหา getSelection()

พร็อพเพอร์ตี้: ไม่มี

นโยบายข้อมูล

สถานที่ได้รับการระบุพิกัดทางภูมิศาสตร์โดย Google Maps ข้อมูลใดๆ ที่ไม่จำเป็นต้องระบุพิกัดทางภูมิศาสตร์จะไม่ถูกส่งไปยังเซิร์ฟเวอร์ใดๆ โปรดดูข้อกำหนดในการให้บริการของ Google Maps สำหรับข้อมูลเพิ่มเติมเกี่ยวกับนโยบายข้อมูล