Hình ảnh trực quan: Biểu đồ địa lý

  1. Tổng quan
  2. Biểu đồ địa lý theo khu vực
  3. Biểu đồ địa lý đánh dấu
  4. Biểu đồ địa lý dạng văn bản
  5. Tô màu biểu đồ
  6. Đang tải
  7. Định dạng dữ liệu
  8. Tuỳ chọn cấu hình
  9. Phương thức
  10. Sự kiện
  11. Chính sách dữ liệu

Tổng quan

Biểu đồ địa lý là bản đồ của một quốc gia, lục địa hoặc khu vực có các khu vực được xác định theo một trong 3 cách:

  • Chế độ khu vực tô màu toàn bộ khu vực, chẳng hạn như quốc gia, tỉnh hoặc tiểu bang.
  • Chế độ điểm đánh dấu sử dụng vòng tròn để chỉ định các khu vực được điều chỉnh theo tỷ lệ theo giá trị mà bạn chỉ định.
  • Chế độ văn bản gắn nhãn các khu vực bằng giá trị nhận dạng (ví dụ: "Nga" hoặc "Châu Á").

Một biểu đồ địa lý sẽ được hiển thị trong trình duyệt bằng cách sử dụng SVG hoặc VML. Lưu ý rằng biểu đồ địa lý không thể cuộn hoặc kéo được và đó là một bản vẽ đường chứ không phải là một bản đồ địa hình. Thay vào đó, nếu bạn muốn sử dụng những tính năng như vậy, hãy cân nhắc sử dụng hình ảnh trực quan hoá bản đồ.

Biểu đồ địa lý theo khu vực

Kiểu regions tô màu toàn bộ khu vực (thường là quốc gia) bằng các màu tương ứng với giá trị mà bạn chỉ định.

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

Biểu đồ địa lý của điểm đánh dấu

Kiểu markers hiển thị các vòng tròn tại các vị trí được chỉ định trên biểu đồ địa lý, với màu và kích thước mà bạn chỉ định.
Hãy thử di chuột qua các điểm đánh dấu lộn xộn xung quanh Rome, một kính lúp sẽ mở ra để hiển thị các điểm đánh dấu chi tiết hơn. (Tính năng kính lúp không được hỗ trợ trong Internet Explorer phiên bản 8 trở xuống.)

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

Hiển thị điểm đánh dấu theo tỷ lệ

Thông thường, biểu đồ địa lý của điểm đánh dấu hiển thị giá trị điểm đánh dấu nhỏ nhất là một điểm tối thiểu. Thay vào đó, nếu bạn muốn hiển thị các giá trị điểm đánh dấu tỷ lệ (ví dụ: vì các giá trị đó là tỷ lệ phần trăm), hãy sử dụng tuỳ chọn sizeAxis để đặt minValue và maxValue một cách rõ ràng.

Ví dụ: sau đây là bản đồ khu vực Tây Âu với dân số và khu vực thuộc 3 quốc gia: Pháp, Đức và Ba Lan. Tập hợp đều là số tuyệt đối (ví dụ: là 65 triệu người đối với Pháp), nhưng các khu vực đều là tỷ lệ phần trăm của tổng thể: điểm đánh dấu của Pháp có màu tím vì dân số của quốc gia này là trung bình, nhưng có kích thước là 50 (trong số 100 có thể có) vì nó chứa 50% diện tích gộp lại.

Trong mã này, chúng tôi sử dụng sizeAxis để chỉ định kích thước điểm đánh dấu trong phạm vi từ 0 đến 100. Chúng tôi cũng sử dụng colorAxis có các giá trị RGB để hiển thị các tập hợp dưới dạng dải màu từ cam đến xanh dương. Đây là một phổ màu sẽ phù hợp với người dùng khiếm thị màu. Cuối cùng, chúng tôi chỉ định khu vực Tây Âu với region là 155, theo phần "Mã và hệ thống phân cấp nội dung" ở phần sau của tài liệu này.

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

Biểu đồ địa lý dạng văn bản

Bạn có thể phủ nhãn văn bản lên một biểu đồ địa lý bằng displayMode: text.

Dữ liệu và các lựa chọn
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['South America', 600],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['Australia', 600]
  ]);

  var options = { displayMode: 'text' };
HTML đầy đủ
<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>

Tô màu biểu đồ

Có một số tuỳ chọn để tuỳ chỉnh màu của Biểu đồ địa lý:

  • colorAxis: dải màu để sử dụng cho các khu vực trong bảng dữ liệu.
  • backgroundColor: màu nền cho biểu đồ.
  • datalessRegionColor: màu để chỉ định cho các vùng không có dữ liệu liên quan.
  • defaultColor: màu cần chỉ định cho các vùng trong bảng dữ liệu có giá trị là null hoặc chưa được chỉ định.

Tuỳ chọn colorAxis là tuỳ chọn quan trọng: tuỳ chọn này chỉ định dải màu cho các giá trị dữ liệu của bạn. Trong mảng colorAxis, phần tử đầu tiên là màu được cấp cho giá trị nhỏ nhất trong tập dữ liệu và phần tử cuối cùng là màu được gán cho giá trị lớn nhất trong tập dữ liệu. Nếu bạn chỉ định nhiều hơn 2 màu, thì nội suy sẽ xảy ra giữa các màu đó.

Trong biểu đồ sau, chúng ta sẽ sử dụng tất cả 4 cách. colorAxis dùng để hiển thị Châu Phi bằng màu cờ liên Phi, dựa trên vĩ độ của các quốc gia: từ màu đỏ ở phía Bắc, màu đen đến màu xanh lục ở phía nam. Tuỳ chọn backgroundColor được dùng để tô màu nền màu xanh dương nhạt, datalessRegionColor để tô màu hồng nhạt cho các quốc gia không phải Châu Phi và defaultColor để Madagascar.
Tuỳ chọn
        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };
Toàn bộ trang web
<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>

Đang tải

Tên gói google.charts.load là "geochart". Lưu ý rằng bạn không nên sao chép mapsApiKey của chúng tôi; như vậy sẽ không có tác dụng. Chỉ cần biểu đồ của bạn không yêu cầu mã hóa địa lý hoặc sử dụng các mã không tiêu chuẩn để xác định vị trí, bạn không cần phải có mapsApiKey. Để biết thêm thông tin chi tiết, hãy xem phần Cài đặt tải. 

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

Tên lớp hình ảnh trên biểu đồ địa lý là google.visualization.GeoChart. 

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

Định dạng dữ liệu

Định dạng của DataTable sẽ khác nhau tuỳ thuộc vào chế độ hiển thị mà bạn sử dụng: regions, markers hoặc text.

Định dạng chế độ khu vực

Vị trí được nhập vào một cột, cộng với một cột tuỳ chọn như được mô tả ở đây:

  1. Vị trí theo khu vực [Chuỗi, Bắt buộc] – Khu vực cần đánh dấu. Chúng tôi chấp nhận tất cả các định dạng sau. Bạn có thể dùng nhiều định dạng trong các hàng khác nhau:
    • Tên quốc gia ở dạng chuỗi (ví dụ: "Anh") hoặc mã ISO-3166-1 alpha-2 viết hoa hoặc văn bản tiếng Anh tương đương (ví dụ: "GB" hoặc "Vương quốc Anh").
    • Tên mã vùng ISO-3166-2 viết hoa hoặc văn bản tiếng Anh tương đương (ví dụ: "US-NJ" hoặc "New Jersey").
    • Mã vùng đô thị. Đây là mã thành phố lớn gồm 3 chữ số dùng để chỉ định nhiều khu vực; mã của Hoa Kỳ chỉ được hỗ trợ. Xin lưu ý rằng những mã này không giống như mã vùng điện thoại.
    • Bất kỳ giá trị nào được thuộc tính region hỗ trợ.
  2. Màu khu vực [Số, Không bắt buộc] – Một cột số không bắt buộc dùng để gán màu cho khu vực này, dựa trên tỷ lệ được chỉ định trong thuộc tính colorAxis.colors. Nếu không có cột này, tất cả các khu vực sẽ đều có cùng một màu. Nếu có cột này, thì giá trị rỗng không được chấp nhận. Các giá trị được tính tỷ lệ theo các giá trị sizeAxis.minValue/sizeAxis.maxValue hoặc theo các giá trị được chỉ định trong thuộc tính colorAxis.values, nếu được cung cấp.

Định dạng chế độ đánh dấu

Số lượng cột thay đổi tuỳ thuộc vào định dạng điểm đánh dấu được sử dụng, cũng như các cột tuỳ chọn khác.

  • Vị trí điểm đánh dấu [Bắt buộc]
    Cột đầu tiên là một địa chỉ dạng chuỗi cụ thể (ví dụ: "1600 Pennsylvania Ave").

    HOẶC

    Hai cột đầu tiên là giá trị số, trong đó cột đầu tiên là vĩ độ và cột thứ hai là kinh độ.

    Lưu ý: Mặc dù bạn nên sử dụng mã ISO 3166 cho chế độ "khu vực", nhưng chế độ "điểm đánh dấu" sẽ phù hợp nhất với các tên dài hơn cho các khu vực (như Đức, Panama, v.v.). Điều này là do biểu đồ địa lý, khi ở chế độ "điểm đánh dấu", sẽ sử dụng Google Maps để mã hoá địa lý cho các vị trí đó (chuyển đổi vị trí chuỗi thành vĩ độ và kinh độ). Điều này có thể dẫn đến việc các vị trí không rõ ràng không được mã hoá địa lý như bạn có thể mong đợi; chẳng hạn như "DE" đại diện cho Đức hoặc Delaware hay "PA" đại diện cho Panama hoặc Pennsylvania.

  • Màu đánh dấu [Số, Không bắt buộc] Cột tiếp theo là cột số không bắt buộc dùng để gán màu cho điểm đánh dấu này, dựa trên thang màu được chỉ định trong thuộc tính colorAxis.colors. Nếu không có cột này, tất cả các điểm đánh dấu sẽ có cùng một màu. Nếu có cột này, thì giá trị rỗng không được chấp nhận. Các giá trị được tính tỷ lệ tương đối với nhau hoặc hoàn toàn theo các giá trị được chỉ định trong thuộc tính colorAxis.values.
  • Kích thước điểm đánh dấu [Số, Không bắt buộc] Một cột số không bắt buộc dùng để chỉ định kích thước điểm đánh dấu, so với các kích thước điểm đánh dấu khác. Nếu không có cột này, giá trị của cột trước đó sẽ được sử dụng (hoặc kích thước mặc định, nếu không có cột màu nào được cung cấp). Nếu có cột này, thì giá trị rỗng không được chấp nhận.

Định dạng chế độ văn bản

Nhãn được nhập vào cột đầu tiên, cộng với một cột tùy chọn:

  • Nhãn văn bản [String, Bắt buộc] Một địa chỉ dạng chuỗi cụ thể (ví dụ: "1600 Pennsylvania Ave").
  • Kích thước văn bản [Số, Không bắt buộc] Cột thứ hai là một cột số không bắt buộc dùng để chỉ định kích thước của nhãn. Nếu không có cột này, tất cả nhãn sẽ có cùng kích thước.

Tuỳ chọn cấu hình

Tên
backgroundColor

Màu nền cho vùng chính của biểu đồ. Có thể là một chuỗi màu HTML đơn giản, ví dụ: 'red' hoặc '#00cc00' hoặc một đối tượng có các thuộc tính sau.

Loại: chuỗi hoặc đối tượng
Mặc định: màu trắng
backgroundColor.fill

Màu nền biểu đồ, dưới dạng chuỗi màu HTML.

Loại: chuỗi
Mặc định: màu trắng
backgroundColor.stroke

Màu của đường viền biểu đồ, dưới dạng chuỗi màu HTML.

Loại: chuỗi
Mặc định: "#666"
backgroundColor.strokeWidth

Chiều rộng đường viền, tính bằng pixel.

Loại: số
Mặc định: 0
colorAxis

Một đối tượng chỉ định mối liên kết giữa các giá trị và màu của cột màu hoặc thang độ dốc. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Loại: đối tượng
Mặc định: rỗng
colorAxis.minValue

Nếu có, hãy chỉ định một giá trị tối thiểu cho dữ liệu màu trong biểu đồ. Giá trị dữ liệu màu của giá trị này trở xuống sẽ được kết xuất dưới dạng màu đầu tiên trong dải ô colorAxis.colors.

Loại: số
Mặc định: Giá trị tối thiểu của cột màu trong dữ liệu biểu đồ
colorAxis.maxValue

Nếu có, hãy chỉ định một giá trị tối đa cho dữ liệu màu trong biểu đồ. Giá trị dữ liệu màu của giá trị này trở lên sẽ được kết xuất dưới dạng màu cuối cùng trong dải ô colorAxis.colors.

Loại: số
Mặc định: Giá trị tối đa của cột màu trong dữ liệu biểu đồ
colorAxis.values

Kiểm soát cách liên kết giá trị với màu (nếu có). Mỗi giá trị được liên kết với màu tương ứng trong mảng colorAxis.colors. Các giá trị này áp dụng cho dữ liệu màu trong biểu đồ. Việc tô màu được thực hiện theo độ dốc của các giá trị được chỉ định ở đây. Việc không chỉ định giá trị cho tuỳ chọn này tương đương với việc chỉ định [minValue, maxValue].

Loại: mảng số
Mặc định: rỗng
colorAxis.colors

Màu để chỉ định cho các giá trị trong hình ảnh trực quan. Một mảng chuỗi, trong đó mỗi phần tử là một chuỗi màu HTML, ví dụ: colorAxis: {colors:['red','#004411']}. Bạn phải có ít nhất hai giá trị; độ dốc sẽ bao gồm tất cả các giá trị của bạn cùng với các giá trị trung gian được tính toán, trong đó màu đầu tiên là giá trị nhỏ nhất và màu cuối cùng là màu cao nhất.

Loại: mảng chuỗi màu
Mặc định: rỗng
datalessRegionColor

Màu để chỉ định cho các vùng không có dữ liệu liên quan.

Loại: chuỗi
Mặc định: "#F5F5F5"
defaultColor

Màu sắc cần sử dụng cho các điểm dữ liệu trong biểu đồ địa lý khi vị trí (ví dụ: 'US' ) nhưng có giá trị là null hoặc chưa được chỉ định. Màu này khác với màu datalessRegionColor (là màu được dùng khi thiếu dữ liệu).

Loại: chuỗi
Mặc định: "#267114"
displayMode

Đây là loại biểu đồ địa lý nào. Định dạng DataTable phải phù hợp với giá trị được chỉ định. Các giá trị sau được hỗ trợ:

  • 'auto' - Chọn dựa trên định dạng của Bảng dữ liệu.
  • "region" (khu vực) – Tô màu các khu vực trên biểu đồ địa lý.
  • "điểm đánh dấu" – Đặt điểm đánh dấu trên các vùng.
  • "text" (văn bản) – Gắn nhãn các vùng bằng văn bản trong DataTable.
Loại: chuỗi
Mặc định: "tự động"
tên miền

Hiển thị biểu đồ địa lý như thể nó được cung cấp từ khu vực này. Ví dụ: việc đặt domain thành 'IN' sẽ hiển thị Kashmir thuộc Ấn Độ thay vì là một lãnh thổ tranh chấp.

Loại: chuỗi
Mặc định: rỗng
enableRegionInteractivity

Nếu là true, hãy bật tính năng tương tác theo khu vực, bao gồm cả việc làm rõ tiêu điểm và đầu công cụ khi di chuột, cũng như chọn khu vực và kích hoạt các sự kiện regionClick và select khi nhấp chuột.

Giá trị mặc định là đúng ở chế độ khu vực và sai khi ở chế độ điểm đánh dấu.

Loại: boolean
Mặc định: tự động
forceIFrame

Vẽ biểu đồ bên trong một khung cùng dòng. (Lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ của IE8 đều được vẽ trong các khung i.)

Loại: boolean
Mặc định: false
geochartVersion

Phiên bản dữ liệu đường viền biểu đồ địa lý. Có các phiên bản 10 và 11.

Loại: số
Mặc định: 10
độ cao

Chiều cao của hình ảnh trực quan, tính bằng pixel. Chiều cao mặc định là 347 pixel, trừ phi tuỳ chọn width được chỉ định và keepAspectRatio được đặt thành true – trong trường hợp đó, chiều cao sẽ được tính toán tương ứng.

Loại: số
Mặc định: tự động
keepAspectRatio

Nếu giá trị là true, biểu đồ địa lý sẽ được vẽ ở kích thước lớn nhất có thể vừa với vùng biểu đồ theo tỷ lệ khung hình tự nhiên. Nếu bạn chỉ chỉ định một trong các lựa chọn width và height, thì lựa chọn còn lại sẽ được tính theo tỷ lệ khung hình.

Nếu giá trị là false (sai), biểu đồ địa lý sẽ được kéo giãn tới kích thước chính xác của biểu đồ như được chỉ định bằng các tuỳ chọn width và height.

Loại: boolean
Mặc định: true
chú thích

Một đối tượng có các thành phần để định cấu hình nhiều khía cạnh của chú giải hoặc "không có" nếu không có chú giải nào xuất hiện. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: 

 {textStyle: {color: 'blue', fontSize: 16}}
Loại: Đối tượng / "không có"
Mặc định: rỗng
legend.numberFormat

Chuỗi định dạng cho các nhãn số. Đây là tập con của bộ mẫu ICU . Ví dụ: {numberFormat:'.##'} sẽ hiển thị các giá trị "10,66", "10,6" và "10,0" cho các giá trị 10,666, 10,6 và 10.

Loại: chuỗi
Mặc định: tự động
legend.textStyle

Đối tượng chỉ định kiểu văn bản chú thích. Đối tượng có định dạng sau:

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
region

Khu vực hiển thị trên biểu đồ địa lý. (Các khu vực xung quanh cũng sẽ hiển thị.) Có thể là một trong những trạng thái sau đây:

  • 'world' - Biểu đồ địa lý của toàn bộ thế giới.
  • Một lục địa hoặc tiểu lục địa, được xác định bằng mã gồm 3 chữ số của nó, ví dụ: "011" cho Tây Phi.
  • Một quốc gia được xác định theo mã ISO 3166-1 alpha-2, ví dụ: "AU" cho Úc.
  • Một tiểu bang ở Hoa Kỳ, được xác định theo mã ISO 3166-2:US, ví dụ: "US-AL" cho Alabama. Xin lưu ý rằng bạn phải đặt lựa chọn resolution thành "provinces" hoặc "metros".
Loại: chuỗi
Mặc định: "thế giới"
magnifyingGlass

Một đối tượng có các thành viên để định cấu hình nhiều khía cạnh của kính lúp. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu bằng chữ của đối tượng, như minh hoạ dưới đây: 

{enable: true, zoomFactor: 7.5}
Loại: Đối tượng
Mặc định: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

Nếu đúng, khi người dùng nán lại trước một điểm đánh dấu lộn xộn, một ly cảnh báo sẽ được mở ra.

Lưu ý: tính năng này không được hỗ trợ trên các trình duyệt không hỗ trợ SVG, tức là Internet Explorer phiên bản 8 trở xuống.

Loại: boolean
Mặc định: true
magnifyingGlass.zoomFactor

Hệ số thu phóng của kính lúp. Có thể là bất kỳ số nào lớn hơn 0.

Loại: số
Mặc định: 5.0
markerOpacity

Độ mờ của điểm đánh dấu, trong đó 0.0 là hoàn toàn trong suốt và 1.0 là hoàn toàn mờ đục.

Loại: số, 0,0 – 1,0
Mặc định: 1.0
regioncoderVersion

Phiên bản của dữ liệu bộ mã hoá khu vực. Có các phiên bản 0 và 1.

Loại: số
Mặc định:0
độ phân giải

Độ phân giải của đường viền biểu đồ địa lý. Chọn một trong các giá trị sau:

  • "countries" – Được hỗ trợ ở tất cả các khu vực, ngoại trừ các khu vực thuộc tiểu bang của Hoa Kỳ.
  • 'tỉnh' - Chỉ được hỗ trợ cho các vùng quốc gia và các vùng tiểu bang của Hoa Kỳ. Chưa hỗ trợ cho một số quốc gia; vui lòng kiểm tra một quốc gia để xem tuỳ chọn này có được hỗ trợ hay không.
  • "metros" – Chỉ được hỗ trợ cho khu vực quốc gia và các tiểu bang của Hoa Kỳ.
Loại: chuỗi
Mặc định: "countries"
sizeAxis

Một đối tượng chứa các thành phần để định cấu hình cách liên kết các giá trị với kích thước bong bóng. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu bằng chữ của đối tượng, như minh hoạ dưới đây: 

 {minValue: 0,  maxSize: 20}
Loại: đối tượng
Mặc định: rỗng
sizeAxis.maxSize

Bán kính tối đa của bong bóng lớn nhất có thể, tính bằng pixel.

Loại: số
Mặc định: 12
sizeAxis.maxValue

Giá trị kích thước (như trong dữ liệu biểu đồ) cần liên kết với sizeAxis.maxSize. Các giá trị lớn hơn sẽ bị cắt bớt theo giá trị này.

Loại: số
Mặc định: Giá trị tối đa của cột kích thước trong dữ liệu biểu đồ
sizeAxis.minSize

Bán kính nhỏ nhất của bong bóng nhỏ nhất có thể, tính bằng pixel.

Loại: số
Mặc định: 3
sizeAxis.minValue

Giá trị kích thước (như trong dữ liệu biểu đồ) cần liên kết với sizeAxis.minSize. Các giá trị nhỏ hơn sẽ bị cắt tới giá trị này.

Loại: số
Mặc định: Giá trị tối thiểu của cột kích thước trong dữ liệu biểu đồ
chú thích

Một đối tượng có các thành viên để định cấu hình nhiều phần tử chú thích. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu bằng chữ đối tượng, như minh hoạ dưới đây: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Loại: đối tượng
Mặc định: rỗng
tooltip.textStyle

Đối tượng chỉ định kiểu văn bản cho chú giải công cụ. Đối tượng có định dạng sau:

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

Hoạt động tương tác của người dùng khiến chú thích xuất hiện:

  • "focus" – Chú thích sẽ hiển thị khi người dùng di chuột qua phần tử.
  • "none" – Chú giải công cụ sẽ không được hiển thị.
  • 'lựa chọn' - Chú giải công cụ sẽ được hiển thị khi người dùng chọn phần tử.
Loại: chuỗi
Mặc định: "lấy nét"
chiều rộng

Chiều rộng của hình ảnh trực quan, tính bằng pixel. Chiều rộng mặc định là 556 pixel, trừ phi tuỳ chọn height được chỉ định và keepAspectRatio được đặt thành true – trong trường hợp đó, chiều rộng sẽ được tính toán tương ứng.

Loại: số
Mặc định: tự động

 

Hệ phân cấp và mã châu lục

Có thể hiển thị biểu đồ địa lý của châu lục/tiểu lục địa bằng cách đặt tuỳ chọn region thành một trong các mã gồm 3 chữ số sau. Những bộ quy tắc và hệ thống phân cấp này dựa trên những bộ quy tắc và hệ thống phân cấp đó (trừ một số trường hợp ngoại lệ) là những bộ quy tắc do Cục Thống kê Liên Hợp Quốc phát triển và duy trì.

Châu lục Tiểu lục địa Quốc gia
002 – Châu Phi 015 - Bắc Phi DZ, EG, EH, LY, MA, SD, SS, TN
011 – Tây Phi BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, {NE} {NE}, {NE} {NE}, {NE} {NE}, 3, 3}SHSLSN
017 – Trung Phi AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 - Đông Phi BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, RE {R, RE {R, RE {R, RE {R, RE, , RE, , RE, , RE, RE, re, re, MG, MURWSCSOTZUG
018 - Nam Phi BW, LS, NA, SZ, ZA
150 - Châu Âu 154 - Bắc Âu GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, IS, {LT}, IS, {LT 3,LV
155 – Tây Âu AT, BE, CH, DE, DD, Pháp, FX, LI, LU, MC, NL
151 - Đông Âu BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA
039 - Nam Âu AD, AL, BA, ES, GI, GR, nhân sự, Ý, ME, MK, MT
019 - Châu Mỹ 021 - Bắc Mỹ BM, CA, GL, PM, Hoa Kỳ
029 – Caribbean AG, AI, AN, AW, BB, BL, BS, CU, DM, NÊN, BL, BS, CU, DM, DO, GDLCMS
013 - Trung Mỹ BZ, CR, GT, HN, MX, NI, PA, SV
005 - Nam Mỹ AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY {SR}, PY {SR}, PY, VE
142 – Châu Á 143 - Trung Á TM, TJ, KG, KZ, UZ
030 - Đông Á CN, HK, Nhật Bản, KP, Hàn Quốc, Trung Quốc, MO, Đài Loan
034 - Nam Á AF, BD, BT, Ấn Độ, IR, LK, Video nhạc, NP, PK
035 - Đông Nam Á BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL, VN, TPVN
145 – Tây Á AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW, LB , LB , LB, LB, IL, IQ
009 – Châu Đại Dương 053 – Úc và New Zealand AU, NF, New Zealand
054 – Melanesia FJ, NC, PG, SB, VU
057 – Micronesia FM, GU, KI, MH, MP, NR, PW
061 – Polynesia AS, CK, NU, PF, PN, TK, TO, TV, WF, WS

Phương thức

Phương thức
clearChart()

Xoá biểu đồ và giải phóng tất cả tài nguyên đã phân bổ của biểu đồ đó.

Loại trả lại: không có
draw(data, options)

Vẽ biểu đồ. Biểu đồ này chỉ chấp nhận các lệnh gọi phương thức khác sau khi kích hoạt sự kiện ready. Extended description.

Loại trả lại: không có
getImageURI()

Trả về biểu đồ được chuyển đổi tuần tự dưới dạng URI hình ảnh.

Gọi lệnh này sau khi biểu đồ được vẽ.

Xem In biểu đồ PNG.

Loại dữ liệu trả về: chuỗi
getSelection()

Trả về một mảng gồm các thực thể biểu đồ đã chọn. Thực thể có thể chọn là các khu vực có một giá trị được chỉ định. Đối với biểu đồ này, bạn chỉ có thể chọn một thực thể tại một thời điểm bất kỳ. Extended description .

Loại dữ liệu trả về: Mảng gồm các phần tử lựa chọn
setSelection()

Chọn các thực thể biểu đồ đã chỉ định. Huỷ mọi lựa chọn trước đó. Thực thể có thể chọn là các khu vực có một giá trị được chỉ định. Đối với biểu đồ này, mỗi lần bạn chỉ có thể chọn một thực thể. Extended description .

Loại trả lại: không có

Sự kiện

Tên
error

Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ.

Thuộc tính: mã nhận dạng, thông báo
ready

Biểu đồ này đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức draw và chỉ gọi các phương thức này sau khi sự kiện được kích hoạt.

Thuộc tính: không có
regionClick

Được gọi khi người dùng nhấp vào một khu vực. Giá trị này sẽ không được gửi cho quốc gia cụ thể được chỉ định trong tuỳ chọn "khu vực" (nếu một quốc gia cụ thể được liệt kê).

Thuộc tính: Một đối tượng có một thuộc tính duy nhất là region, là một chuỗi ở định dạng ISO-3166 mô tả khu vực được nhấp vào.
select

Được kích hoạt khi người dùng nhấp vào một thực thể hình ảnh. Để tìm hiểu những mục đã được chọn, hãy gọi hàm getSelection().

Thuộc tính: không có

Chính sách dữ liệu

Các vị trí được mã hoá địa lý bởi Google Maps. Mọi dữ liệu không yêu cầu mã hoá địa lý sẽ không được gửi đến bất kỳ máy chủ nào. Vui lòng xem Điều khoản dịch vụ của Google Maps để biết thêm thông tin về chính sách dữ liệu của Google Maps.