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

  1. Tổng quan
  2. Biểu đồ địa lý khu vực
  3. Biểu đồ địa lý đánh dấu
  4. Biểu đồ địa lý dạng văn bản
  5. Màu sắc biểu đồ của bạn
  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à một bản đồ của một quốc gia, một châu lục hoặc một khu vực có các khu vực được xác định theo một trong ba cách sau:

  • Chế độ khu vực sẽ 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 vùng đượ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 sơ đồ địa lý đượ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, và đó là bản vẽ đường kẻ chứ không phải bản đồ địa hình; nếu bạn muốn bất kỳ điều gì trong số đó, hãy cân nhắc trực quan hoá bản đồ.

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

Kiểu regions lấp đầy toàn bộ các khu vực (thường là các quốc gia) bằng màu sắc tương ứng với các 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ý đánh dấu

Kiểu markers hiển thị vòng tròn tại các vị trí được chỉ định trên biểu đồ địa lý, với màu sắc 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 quanh Rome, và kính lúp sẽ mở ra để hiển thị các điểm đánh dấu chi tiết hơn. (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ý điểm đánh dấu hiển thị giá trị điểm đánh dấu nhỏ nhất là đ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 theo tỷ lệ (giả sử vì đó là tỷ lệ phần trăm), hãy sử dụng tùy chọn sizeAxis để đặt minValue và maxValue một cách rõ ràng.

Ví dụ: đây là bản đồ Tây Âu có dân số và khu vực cho 3 quốc gia: Pháp, Đức và Ba Lan. Các dân số đều là các số tuyệt đối (ví dụ: 65 triệu đối với Pháp)

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 với các giá trị RGB để hiển thị các dân số theo dải màu từ cam đến xanh dương. Đây là một dải màu sẽ hoạt động tốt cho người dùng khiếm thị. Cuối cùng, chúng tôi chỉ định Tây Âu bằng region là 155, theo phần "Hệ phân cấp nội dung và mã" ở 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ý văn bản

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

Dữ liệu và tùy 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ủa bạn

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

  • colorAxis: phổ 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 sắc để chỉ định cho các khu vực không có dữ liệu liên quan.
  • defaultColor: màu sắc gán cho các khu vực trong bảng dữ liệu có giá trị là null hoặc không xác định.

Tùy chọn colorAxis là tùy chọn quan trọng: tùy 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 cấp cho giá trị lớn nhất trong tập dữ liệu. Nếu bạn chỉ định nhiều hơn hai màu, thì phép nội suy giữa các màu đó sẽ xảy ra.

Trong biểu đồ sau, chúng ta sẽ sử dụng cả bốn tuỳ chọn. colorAxis được dùng để hiển thị châu Phi với màu sắc của cờ châu Phi, sử dụng vĩ độ của các quốc gia: từ màu đỏ ở phía bắc, từ màu đen đến màu xanh lục ở phía nam. Tuỳ chọn backgroundColor được dùng để tô màu nền xanh lam nhạt, datalessRegionColor để tô màu các quốc gia không phải châu Phi bằng màu hồng nhạt và defaultColor cho Madagascar.
Tùy chọn
        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };
Trang web đầ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 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". Xin lưu ý rằng bạn không nên sao chép mapApiKey của chúng tôi; cách này không có tác dụng. Miễn là biểu đồ của bạn không yêu cầu mã hóa địa lý hoặc sử dụng mã không chuẩn để xác định vị trí, bạn không cần mapApiKey. Để biết thêm thông tin chi tiết, vui lòng 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 của hình ảnh 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 Bảng dữ liệu 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

Bạn có thể nhập vị trí vào một cột và thêm một cột không bắt buộc như mô tả ở đây:

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

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

Số lượng cột sẽ khác nhau 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í đánh dấu [Bắt buộc]
    Cột đầu tiên là một địa chỉ chuỗi cụ thể (ví dụ: "1600 Pennsylvania Ave").

    HOẶC

    2 cột đầu tiên là 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" hoạt động hiệu quả nhất khi đặt 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ế độ "đánh dấu", sử dụng Google Maps để mã hóa địa lý các vị trí (chuyển đổi một vị trí chuỗi thành vĩ độ và kinh độ). Điều này có thể dẫn đến những 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" là viết tắt của Đức hoặc Đức hoặc "PA" là viết tắt của Panama hoặc Pennsylvania.

  • Màu điểm đánh dấu [Số, không bắt buộc] Cột tiếp theo là một cột số tuỳ chọn dùng để chỉ định màu cho điểm đánh dấu này, dựa trên tỷ lệ được chỉ định trong thuộc tính colorAxis.colors. Nếu cột này không hiển thị, thì tất cả các điểm đánh dấu sẽ có cùng màu. Nếu có cột này, bạn sẽ không được phép sử dụng giá trị rỗng. Các giá trị được điều chỉnh theo tỷ lệ tương đối hoặc tuyệt đối so với 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] Cột số tùy chọn 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 cột này không tồn tại, thì 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, bạn sẽ không được phép sử dụng giá trị rỗng.

Đị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 không bắt buộc:

  • Nhãn văn bản [Chuỗi, Bắt buộc] Địa chỉ 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 cột này không hiển thị, thì tất cả các nhãn sẽ có cùng kích thước.

Các lựa chọn về cấu hình

Tên
màu nền

Màu nền của vùng chính trên 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

Biểu đồ tô mà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
Trục màu

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 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 họa 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 của biểu đồ. Các giá trị dữ liệu màu của giá trị này trở xuống sẽ hiển thị 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 của biểu đồ. Các giá trị dữ liệu màu của giá trị này trở lên sẽ hiển thị 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

Nếu có, hãy kiểm soát cách các giá trị liên kết với màu sắc. Mỗi giá trị được liên kết với một 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 của biểu đồ. 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 sắc để 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ả giá trị của bạn, cộng với giá trị trung gian đã tính toán, với màu đầu tiên là giá trị nhỏ nhất và màu cuối cùng là cao nhất.

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

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

Loại: chuỗi
Mặc định: "#F5F5F5"
màu sắc mặc định

Màu sắc 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ị null hoặc không xác định. Khác với datalessRegionColor, đây là màu được sử dụng khi thiếu dữ liệu.

Loại: chuỗi
Mặc định: "#267114"
Chế độ hiển thị

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

  • "auto" – Chọn dựa trên định dạng của DataTable.
  • '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" – Gắn nhãn các khu vực bằng văn bản trên DataTable.
Loại: chuỗi
Mặc định: "tự động"
miền

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

Loại: chuỗi
Mặc định: rỗng
bật Khu vực tương tác khu vực

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ấy tiêu điểm và chỉnh sửa chú giải công cụ khi di chuột, cũng như chọn khu vực và kích hoạt sự kiện regionClick và select khi nhấp chuột.

Giá trị mặc định là đúng ở chế độ khu vực và là false ở chế độ đá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. (Xin lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ IE8 đều được vẽ trong khung i.)

Loại: Boolean
Mặc định: sai
phiên bản biểu đồ địa lý

Phiên bản của dữ liệu đường viền của GraphChart. 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, tính bằng pixel. Chiều cao mặc định là 347 pixel, trừ khi bạn chỉ định tùy chọn width và đặt keepAspectRatio thành true – trong trường hợp đó, chiều cao được tính tương ứng.

Loại: số
Mặc định: tự động
tỷ lệ khung hình giữ lại

Nếu là đúng, 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 đồ ở tỷ lệ khung hình tự nhiên. Nếu chỉ có một trong các tuỳ chọn width và height, thì tuỳ chọn còn lại sẽ được tính theo tỷ lệ khung hình.

Nếu giá trị này là false, biểu đồ địa lý sẽ bị kéo dài đến kích thước chính xác của biểu đồ theo các tuỳ chọn width và height.

Loại: Boolean
Mặc định: true
chú giải

Một đối tượng có thành viê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
huyền thoại.numberFormat

Chuỗi định dạng cho các nhãn số. Đây là tập hợ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
Style.textStyle

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

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

color có thể là chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

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

Khu vực sẽ hiển thị trên biểu đồ địa lý. (Những 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ý về toàn thế giới.
  • Châu lục hoặc một tiểu lục địa, được chỉ định bằng mã gồm 3 chữ số, ví dụ: '011' cho Tây Phi.
  • 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ụ thể là theo mã ISO 3166-2:US, ví dụ: "US-AL" ở Alabama. Lưu ý rằng bạn phải đặt tùy chọn resolution thành "tỉnh" hoặc "metros".
Loại: chuỗi
Mặc định: "thế giới"
kính lúp

Một đối tượng có thành viên để định cấu hình các khía cạnh khác nhau của kính lúp. Để chỉ định 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: 

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

Nếu đúng, khi người dùng nán lại trên một điểm đánh dấu lộn xộn, một kính lúp sẽ được mở ra.

Lưu ý: tính năng này không được hỗ trợ trong 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
kính lúp

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

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

Loại: số 0,0–1,0
Mặc định: 1.0
Mã phiên bản khu vực

Phiên bản dữ liệu mã hoá của 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ợ cho tất cả các khu vực, ngoại trừ các khu vực tiểu bang của Hoa Kỳ.
  • 'tỉnh' - Chỉ hỗ trợ cho các vùng quốc gia và các vùng tiểu bang của Hoa Kỳ. Không hỗ trợ cho một số quốc gia; vui lòng kiểm tra một quốc gia để xem liệu tuỳ chọn này có được hỗ trợ hay không.
  • 'metros' – Chỉ được hỗ trợ cho khu vực quốc gia Hoa Kỳ và các khu vực tiểu bang của Hoa Kỳ.
Loại: chuỗi
Mặc định: "countries"
Kích thước trục

Một đối tượng có thành viên để định cấu hình cách các giá trị liên kết với kích thước bong bóng. Để chỉ định 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,  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
kích thướcAxis.maxValue

Giá trị kích thước (như xuất hiện trong dữ liệu biểu đồ) để được liên kết đến sizeAxis.maxSize. Các giá trị lớn hơn sẽ bị cắt thành 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 tối thiểu của bong bóng nhỏ nhất có thể, tính bằng pixel.

Loại: số
Mặc định: 3
kích thướcAxis.minValue

Giá trị kích thước (như xuất hiện trong dữ liệu biểu đồ) để được liên kết đến sizeAxis.minSize. Giá trị nhỏ hơn sẽ bị cắt thành 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ú giải công cụ

Một đối tượng có thành viên để định cấu hình các thành phần trong chú giải công 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: 

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

Đối tượng chỉ định kiểu văn bản của 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à chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
chú giải công cụ trong trình kích hoạt

Tương tác của người dùng khiến chú giải công cụ được hiển thị:

  • "tiêu điểm" – Chú giải công cụ 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 hiển thị.
  • 'selection' – Chú giải công cụ sẽ hiển thị khi người dùng chọn phần tử.
Loại: chuỗi
Mặc định: "tiêu điểm"
chiều rộng

Chiều rộng hình ảnh, tính bằng pixel. Chiều rộng mặc định là 556 pixel, trừ khi bạn chỉ định tùy chọn height và đặt keepAspectRatio thành đúng – trong trường hợp đó, chiều rộng được tính tương ứng.

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

 

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

Bạn có thể hiển thị biểu đồ địa lý của các châu lục/tiểu lục địa bằng cách đặt tùy chọn region thành một trong các mã gồm 3 chữ số sau đây. Mã và hệ thống phân cấp dựa trên một số trường hợp ngoại lệ, trên những mã được phát triển và duy trì bởi Bộ phận thống kê của Liên Hợp Quốc .

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, 21,12, 2, 3, 2, 2, 22, 22 con trở lên, 2,12, 2, 21, 22,22, 23,22,22, 23,23, 23,22 nhận thấy
017 – Trung Phi AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 - Đông Phi
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, 22, 22,12} , 23,26,,12}
155 - Tây Âu AT, BE, CH, DE, DD, FR, 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, HR, IT, ME, MK, MT 23}
019 – Châu Mỹ 021 – Bắc Mỹ BM, CA, GL, PM, US
029 – Món ăn Caribe bộ bộ bộ đánh đánh đánh đánh đánh đánh đánh tệp tệp tệp tệp tệp ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( dựa dựa dựa ( dựa dựa dựa dựa dựa dựa dựa dựa ( qua
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 , 22,5
142 – Châu Á 143 – Trung Á TM, TJ, KG, KZ, UZ
030 - Đông Á CN, HK, JP, KP, KR, MN, MO, TW
034 – Nam Á AF, BD, BT, IN, IR, LK, MV, NP, PK
035 – Đông Nam Á BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL {22, 22, 22,5
145 - Tây Á
009 – Châu Đại Dương 053 – Úc và New Zealand Úc, NF, NZ
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 được phân bổ của biểu đồ.

Loại dữ liệu trả về: không có
draw(data, options)

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

Loại dữ liệu trả về: không có
getImageURI()

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

Gọi hàm này sau khi biểu đồ được vẽ.

Xem phần In biểu đồ PNG.

Loại trả về: chuỗi
getSelection()

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

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

Chọn các thực thể biểu đồ đã chỉ định. Hủy mọi lựa chọn trước đó. Các thực thể có thể chọn là những khu vực có 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 dữ liệu trả về: 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 đồ đã 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 bạn 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 một khu vực được nhấp vào. Dữ liệu 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ê).

Properties (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 bạn đã chọn, hãy gọi getSelection().

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

Chính sách về dữ liệu

Vị trí được Google Maps mã hóa địa lý. 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 họ.