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.
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['South America', 600],
['Canada', 500],
['France', 600],
['Russia', 700],
['Australia', 600]
]);
var options = { displayMode: 'text' };
<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ànullhoặ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.
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>
Đ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:
-
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
regionhỗ trợ.
-
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.maxValuehoặc theo các giá trị được chỉ định trong thuộc tínhcolorAxis.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]
HOẶC
Cột đầu tiên là một địa chỉ dạng chuỗi cụ thể (ví dụ: "1600 Pennsylvania Ave").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ínhcolorAxis.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ụ: 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 ô 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 ô 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 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ụ: 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ụ: 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ợ:
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 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 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 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 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
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 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ụ: 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> }
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:
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 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:
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 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 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> }
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:
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 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
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ỳ.
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ể.
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 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
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.