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

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

ภาพรวม

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

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

แผนภูมิภูมิศาสตร์จะแสดงผลภายในเบราว์เซอร์โดยใช้ 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);

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

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

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

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

  1. ตําแหน่งภูมิภาค [สตริงที่จําเป็น] - ภูมิภาคที่จะไฮไลต์ ระบบยอมรับรูปแบบต่อไปนี้ทั้งหมด คุณใช้รูปแบบต่างๆ ในแถวที่แตกต่างกันได้
    • ชื่อประเทศเป็นสตริง (เช่น "อังกฤษ") หรือรหัส ISO-3166-1 alpha-2 ตัวพิมพ์ใหญ่ หรือ ข้อความภาษาอังกฤษที่เทียบเท่า (เช่น "GB" หรือ "สหราชอาณาจักร")
    • ชื่อรหัสภูมิภาค ISO-3166-2 ตัวพิมพ์ใหญ่หรือคําภาษาอังกฤษที่เทียบเท่า (เช่น "US-NJ" หรือ "New Jธุรกิจของคุณ")
    • รหัสพื้นที่มหานคร นี่คือรหัสเมืองใหญ่ 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 เป็นคอลัมน์ตัวเลขที่ไม่บังคับซึ่งใช้กําหนดขนาดของป้ายกํากับ หากไม่มีคอลัมน์นี้ ป้ายกํากับทั้งหมดจะมีขนาดเท่ากัน

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

ชื่อ
สีพื้นหลัง

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: สีขาว
พื้นหลังสีขีด

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

ประเภท: สตริง
ค่าเริ่มต้น: "#666"
พื้นหลังของสี.ความกว้างความกว้าง

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

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

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

 {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
สีภูมิภาคของข้อมูล

สีเพื่อกําหนดให้กับภูมิภาคที่ไม่มีข้อมูลที่เชื่อมโยงอยู่

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

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

ประเภท: สตริง
ค่าเริ่มต้น: "#267114"
โหมดการแสดงผล

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: Null
เปิดใช้ภูมิภาคอินเทอร์แอกทีฟ

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

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

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

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

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
แผนภูมิภูมิศาสตร์

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

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

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

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

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

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

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

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
คําอธิบายข้อความรูปแบบ

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

{ 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>}
region

พื้นที่ที่จะแสดงบนแผนภูมิภูมิศาสตร์ (ระบบจะแสดงพื้นที่โดยรอบด้วย) อาจมีสถานะใดสถานะหนึ่งต่อไปนี้

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

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

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

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

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

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
แว่นขยาย

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 5.0
ความทึบแสงของตัวทําเครื่องหมาย

ความทึบแสงของตัวทําเครื่องหมาย โดยที่ 0.0 มีความโปร่งใสทั้งหมด และ 1.0 จะทึบแสงโดยสมบูรณ์

ประเภท: ตัวเลข 0.0–1.0
ค่าเริ่มต้น: 1.0
รหัสภูมิภาคภูมิภาค

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

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

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

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

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

 {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
troubleshooter.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>}
เคล็ดลับเครื่องมือ

การโต้ตอบของผู้ใช้ที่ทําให้เคล็ดลับเครื่องมือแสดง

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

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

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

 

ลําดับชั้นและโค้ดของทวีป

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

ทวีป ทวีปย่อย ประเทศ
002 - แอฟริกา 015 - แอฟริกาเหนือ DZ, EG, EH, LY, MA, SD, SS, TN
011 - แอฟริกาตะวันตก BF, BJ, CI, CV, GH, GM, GN, GW, LR, 22 2 2 }
017 - แอฟริกากลาง AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 - แอฟริกาตะวันออก BI, DJ, ER, ET, KE, KM, MG, MU, MW, MWW 2}
018 - แอฟริกาใต้ BW, LS, NA, SZ, ZA
150 - ยุโรป 154 - ยุโรปเหนือ GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, IE, IE, IE, IM, IE, 22
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, ES, GI, GR, HR, IT, ME, ME, M22 }2
019 - อเมริกา 021 - อเมริกาเหนือ BM, CA, GL, PM, สหรัฐอเมริกา
029 - แคริบเบียน วิดีโอที่ จะมีเฉพาะ สี ซึ่งซึ่ง ซึ่งซึ่งซึ่งซึ่งซึ่งซึ่งซึ่งซึ่งซึ่งซึ่งซึ่งระบบระบบระบบระบบระบบว่าว่า “ระบบว่า กําหนดให้สีสีสีสีอยู่ด้วย ซึ่งอยู่ด้วย ซึ่ง ซึ่งสีสี หาก หาก หาก หากสีสี คุณสามารถใช้ คุณสามารถใช้ หาก หากเพื่อให้เพื่อให้เพื่อให้เพื่อให้เพื่อให้เพื่อให้เพื่อให้ที่ข่าวทุกที่
013 - อเมริกากลาง BZ, CR, GT, HN, MX, NI, PA, SV
005 - อเมริกาใต้ AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, GY, PE, GY PY2{/22PY
142 - เอเชีย 143 - เอเชียกลาง TM, TJ, KG, KZ, UZ
030 - เอเชียตะวันออก CN, ฮ่องกง, ญี่ปุ่น, KP, KR, MN, MO, TW
034 - เอเชียใต้ AF, BD, BT, IN, IR, LK, MV, NP, PK
035 - เอเชียตะวันออกเฉียงใต้ <br><p>
145 - เอเชียตะวันตก AE, AM, AZ, BH, CY, GE, IL, IQ, JO, JO, J2
009 - โอเชียเนีย 053 - ออสเตรเลียและนิวซีแลนด์ ออสเตรเลีย, NF, นิวซีแลนด์
054 - เมเลนเซีย FJ, NC, PG, SB, VU
057 - ไมโครนีเซีย FM, GU, KI, MH, MP, NR, PW
061 - โปลินีเซีย AS, CK, NU, PF, PN, TK, ถึง, TV, WF, WS

เมธอด

วิธีการ
clearChart()

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

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

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

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

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

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

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

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

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

ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
setSelection()

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

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

เหตุการณ์

ชื่อ
error

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

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

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

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

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

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

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

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

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

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