Lưu ý quan trọng: Phần Biểu đồ hình ảnh của Công cụ biểu đồ Google đã không còn được dùng chính thức kể từ ngày 20 tháng 4 năm 2012. Quảng cáo sẽ tiếp tục hoạt động theo chính sách không dùng nữa của chúng tôi.
Tổng quan
Biểu đồ hình ảnh chung là một trình bao bọc chung cho tất cả các biểu đồ do Google Graph API tạo ra. Vui lòng đọc tài liệu về API Biểu đồ trước khi cố gắng sử dụng hình ảnh trực quan này. Xin lưu ý rằng bạn có thể gửi tối đa 16K dữ liệu bằng cách sử dụng hình ảnh trực quan này, khác với giới hạn 2K trong các lệnh gọi trực tiếp đến API đồ thị.
Tất cả dữ liệu được chuyển đến biểu đồ bằng cách sử dụng DataTable hoặc DataView. Ngoài ra, một số nhãn được chuyển dưới dạng cột trong bảng dữ liệu.
Tất cả tham số URL khác của API biểu đồ (ngoại trừ chd) đều được chuyển dưới dạng tùy chọn.
Của: Google
Ví dụ
Dưới đây là ví dụ về một số loại biểu đồ.
Biểu đồ dạng đườ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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
Biểu đồ thanh dọc
Lưu ý trong biểu đồ thanh được bao bọc, bạn không cần chỉ định chxt='x' như khi tự gọi biểu đồ; nếu bạn không chỉ định trục, Biểu đồ hình ảnh chung sẽ cố gắng thiết lập biểu đồ đúng cách theo mặc đị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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</html>
Biểu đồ hình tròn
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</html>
Biểu đồ rađa
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</html>
Biểu đồ bản đồ
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
Đang tải
Tên gói google.charts.load là 'imageChart'
google.charts.load('current', {'packages': ['imagechart']});
Tên lớp của hình ảnh trực quan là google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
Định dạng dữ liệu
Có hai định dạng dữ liệu chung: một cho biểu đồ bản đồ và một cho tất cả các biểu đồ khác. Xin lưu ý rằng định dạng số duy nhất được hỗ trợ cho dữ liệu là loại Mã số JavaScript.
Lưu ý Bạn không nên mã hoá URL cho bất kỳ giá trị chuỗi nào được chuyển dưới dạng dữ liệu hoặc tuỳ chọn.
Biểu đồ bản đồ
Một biểu đồ bản đồ sẽ lấy một bảng dữ liệu có hai cột bắt buộc:
- Cột đầu tiên – [chuỗi] Mã quốc gia hoặc mã tiểu bang/tỉnh.
- Cột thứ hai – [số] Giá trị cho quốc gia hoặc tiểu bang đó.
Xem tài liệu về biểu đồ bản đồ để biết thêm thông tin.
Biểu đồ không phải bản đồ
Biểu đồ không phải bản đồ lấy một bảng dữ liệu với hai cột không bắt buộc (một cột ở đầu, một ở cuối) và một hoặc nhiều cột dữ liệu ở giữa:
- Cột đầu tiên – [không bắt buộc, chuỗi] Mỗi mục biểu thị một nhãn
dùng trên trục X (tương đương với tham số
chlhoặcchxl) cho các biểu đồ hỗ trợ mục đó. - Cột tiếp theo – Số lượng cột bất kỳ, mỗi cột thể hiện một chuỗi dữ liệu.
- Các cột cuối cùng – [không bắt buộc, chuỗi] Số lượng cột chuỗi bất kỳ sau các cột dữ liệu, trong đó mỗi mục nhập đại diện cho một nhãn điểm dữ liệu cho các biểu đồ hỗ trợ mục này. Nếu muốn sử dụng cột này, bạn phải chỉ định tuỳ chọn
annotationColumns.
Dữ liệu sẽ hiển thị theo nhiều cách khác nhau, tuỳ thuộc vào loại biểu đồ. Xem tài liệu cho biểu đồ của bạn.
Lưu ý về chỉ mục cột: Hình ảnh biểu đồ hình ảnh chung chung sẽ xoá các cột chuỗi khỏi bảng dữ liệu trước khi gửi bảng đến dịch vụ API biểu đồ. Do đó, các chỉ mục cột trong các tùy chọn, phương thức
và sự kiện được xác định trên trang này bao gồm các cột chuỗi trong số lượng chỉ mục;
nhưng các chỉ mục cột trong bất kỳ tùy chọn nào do dịch vụ API biểu đồ xử lý (ví dụ:
tùy chọn chm) bỏ qua các cột chuỗi trong số lượng chỉ mục.
Các tuỳ chọn cấu hình
Các tùy chọn sau đây được xác định cho hình ảnh trực quan này. Hãy xác định các thông số này trong đối tượng tùy chọn được chuyển vào phương thức draw() của hình ảnh trực quan hóa.
Một số tùy chọn sau đây không được hỗ trợ cho mọi loại biểu đồ. Hãy xem tài liệu
về loại biểu đồ hình ảnh tĩnh. Bạn có thể chuyển bất kỳ tham số URL Biểu đồ API nào dưới dạng tuỳ chọn. Ví dụ: tham số URL chg=50,50 của hình ảnh biểu đồ sẽ được chỉ định theo cách sau: options['chg'] = '50,50'.
Lưu ý về màu sắc: Các tuỳ chọn màu sắc như colors, color và backgroundColor được chỉ định ở định dạng màu của API Biểu đồ.
Định dạng này tương tự như định dạng #RRGGBB, ngoại trừ việc định dạng này bao gồm một số thập lục phân thứ tư tuỳ chọn để cho biết độ trong suốt. Không hỗ trợ màu sắc mà con người có thể đọc được, chẳng hạn như "màu đỏ", "xanh lục", "màu xanh dương", v. v. Định dạng màu của API biểu đồ không bao gồm ký hiệu # ở đầu, nhưng các tùy chọn hình ảnh hóa biểu đồ hình ảnh chung chung sẽ chấp nhận mã màu có hoặc không có #.
| Tên | Loại | Mặc định | Mô tả |
|---|---|---|---|
| được chú thích | Mảng<đối tượng> | không có | Nhãn điểm dữ liệu cho nhiều loại biểu đồ. Đây là một mảng các đối tượng, mỗi đối tượng gán một nhãn đã định dạng cho một điểm dữ liệu trên biểu đồ. Tuỳ chọn này chỉ áp dụng cho các biểu đồ hỗ trợ các điểm dữ liệu (xem chủ đề được liên kết để tìm hiểu những vị trí cụ thể) và bảng dữ liệu phải có ít nhất một trong các cột nhãn chuỗi. Mỗi đối tượng trong mảng có các thuộc tính sau:
Ví dụ – Đoạn mã này xác định một nhãn văn bản màu đen, có kích thước 12 pixel, với văn bản được lấy từ cột 0 và gán cho điểm dữ liệu trong cột 2 của cùng hàng: |
| màu nền | chuỗi | "#FFFFFF" (màu trắng) | Màu nền của biểu đồ ở định dạng màu API Biểu đồ. |
| màu | chuỗi | Tự động | Chỉ định màu cơ bản để sử dụng cho tất cả các bộ sách; mỗi bộ sách sẽ là một cấp độ thấp hơn của màu được chỉ định. Màu được chỉ định ở định dạng màu của API biểu đồ.
Bỏ qua nếu bạn chỉ định colors. |
| màu | Mảng<chuỗi> | Tự động | Sử dụng tính năng này để chỉ định màu cụ thể cho từng chuỗi dữ liệu. Màu được chỉ định trong định dạng màu của API biểu đồ.
Màu i được dùng cho cột dữ liệu i, xuống đến đầu nếu có nhiều cột dữ liệu hơn màu. Nếu chấp nhận được các biến thể của một màu duy nhất cho tất cả bộ sách, hãy sử dụng tuỳ chọn color. |
| bật sự kiện | boolean | sai | Làm cho biểu đồ gửi các sự kiện do người dùng kích hoạt, chẳng hạn như nhấp chuột hoặc di chuột qua. Chỉ được hỗ trợ cho các loại biểu đồ cụ thể. Xem Sự kiện bên dưới. |
| tô | boolean | sai | Nếu là giá trị true, hãy điền vào vùng bên dưới mỗi dòng. Chỉ áp dụng cho biểu đồ dạng đường. |
| cột Ẩn đầu tiên | number | không có | Chỉ mục cột dữ liệu. Cột được liệt kê, cũng như tất cả các cột sau, sẽ không được dùng để vẽ các phần tử chuỗi biểu đồ chính (chẳng hạn như các đường trên biểu đồ dạng đường hoặc thanh trên biểu đồ thanh), mà thay vào đó sẽ được dùng làm dữ liệu cho các điểm đánh dấu và các chú thích khác. Xin lưu ý rằng các cột trong chuỗi này sẽ được tính vào số chỉ mục này. |
| độ cao | number | 200 | Chiều cao của biểu đồ, tính bằng pixel. Nếu thiếu hoặc không nằm trong phạm vi có thể chấp nhận, thì chiều cao của phần tử chứa sẽ được sử dụng. Nếu giá trị đó cũng nằm ngoài phạm vi cho phép, thì chiều cao mặc định sẽ được sử dụng. |
| nhãn | chuỗi | "không có" | [Chỉ áp dụng biểu đồ hình tròn] Nhãn nào (nếu có) sẽ xuất hiện cho từng phần. Chọn trong số các giá trị sau:
|
| chú giải | chuỗi | "phải" | Nơi hiển thị chú giải biểu đồ, tương ứng với biểu đồ. Hãy chỉ định một trong các giá trị sau: "top" (trên cùng), "bottom" (dưới), "left" (trái), "right" (phải), "none" (không có). Bỏ qua trong các biểu đồ không chứa chú giải (chẳng hạn như biểu đồ bản đồ). |
| tối đa | number | Giá trị dữ liệu tối đa | Giá trị lớn nhất được hiển thị trên thang này. Bỏ qua các biểu đồ hình tròn. Giá trị mặc định là giá trị dữ liệu tối đa, ngoại trừ biểu đồ thanh, trong đó giá trị mặc định là giá trị dữ liệu tối đa. Biểu đồ thanh này sẽ bị bỏ qua khi bảng có nhiều cột dữ liệu. |
| phút | number | Giá trị dữ liệu Mimimum | Giá trị tối thiểu hiển thị trên thang. Bỏ qua các biểu đồ hình tròn. Giá trị mặc định là giá trị dữ liệu tối thiểu, ngoại trừ biểu đồ thanh, trong đó giá trị mặc định là 0. Biểu đồ này sẽ bị bỏ qua khi biểu đồ thanh có nhiều cột dữ liệu. |
| showCategoryNhãn | boolean | đúng | Liệu nhãn có xuất hiện trên trục danh mục (tức là hàng) hay không. Chỉ dành cho biểu đồ dạng đường và biểu đồ thanh. |
| showValueLabel | boolean | đúng | True sẽ hiển thị nhãn trên trục giá trị. Chỉ dành cho biểu đồ dạng đường và biểu đồ thanh. |
| singleColumnDisplay | number | không có | Chỉ hiển thị cột dữ liệu được chỉ định. Số này là một chỉ mục dựa trên 0 vào bảng, trong đó số 0 là cột dữ liệu đầu tiên. Màu được gán cho một cột giống như khi hiển thị tất cả các cột. Không thể sử dụng với biểu đồ hình tròn hoặc biểu đồ bản đồ. |
| tiêu đề | chuỗi | Chuỗi trống | Tiêu đề biểu đồ. Nếu bạn không chỉ định thì sẽ không có tiêu đề nào xuất hiện. Thông số biểu đồ
tương đương là chtt. |
| Khoảng thời gian giá trị của nhãn | number | Tự động | Khoảng thời gian hiển thị nhãn trục giá trị. Ví dụ: nếu min là 0, max là 100 và valueLabelsInterval là 20, biểu đồ sẽ hiển thị các nhãn trục ở (0, 20, 40, 60, 80 100). |
| chiều rộng | number | 400 | Chiều rộng của biểu đồ, tính bằng pixel. Nếu thiếu hoặc không nằm trong phạm vi có thể chấp nhận, chiều rộng của phần tử chứa sẽ được sử dụng. Nếu giá trị này nằm ngoài phạm vi cho phép, thì chiều rộng mặc định sẽ được sử dụng. |
Phương thức
| Phương thức | Loại dữ liệu trả về | Mô tả |
|---|---|---|
draw(data, options) |
Không | Vẽ bản đồ. |
getImageUrl() |
Chuỗi | Trả về URL API của Google Biểu đồ được dùng để yêu cầu biểu đồ. Xin lưu ý rằng đoạn mã này có thể dài hơn 2.000 ký tự. Hãy xem API Biểu đồ của Google để biết thêm thông tin chi tiết. |
Sự kiện
Nếu bạn thiết lập thuộc tính enableEvents thành đúng (true), thì biểu đồ hỗ trợ sẽ gửi những sự kiện cho những sự kiện của người dùng được liệt kê trong bảng bên dưới. Tất cả các sự kiện này sẽ trả về đối tượng event có các thuộc tính sau:
type– Một chuỗi đại diện cho loại sự kiện.region– Mã nhận dạng cho khu vực bị ảnh hưởng. Hãy thêm thông sốchof=jsonvào loại biểu đồ thô để xem danh sách các tên có sẵn. Hãy xemchof=jsonđể biết thêm chi tiết.
| Tên | Mô tả | nhập Giá trị |
|---|---|---|
error |
Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ. | mã nhận dạng, tin nhắn |
onmouseover |
Được kích hoạt khi người dùng di chuột qua một thành phần trong biểu đồ. | "di chuột qua" |
onmouseout |
Được kích hoạt khi người dùng di chuột ra khỏi phần tử biểu đồ. | "chuột nhanh" |
onclick |
Được kích hoạt khi người dùng nhấp vào một thành phần trong biểu đồ. | "nhấp vào" |
Những biểu đồ nào hỗ trợ các sự kiện?
Những biểu đồ hỗ trợ thông số chof=json đều hỗ trợ việc gửi các sự kiện (tức là tất cả các biểu đồ, ngoại trừ biểu đồ đặc biệt, chẳng hạn như mã QR).
Ví dụ về xử lý sự kiện
Dưới đây là ví dụ cho thấy một thanh ghi lại các lượt nhấp chuột.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
Chính sách dữ liệu
Dữ liệu được gửi đến dịch vụ Google Chart API.
Bản địa hoá
Hình ảnh này hỗ trợ mọi nội dung bản địa hoá được dịch vụ Google Biểu đồ hỗ trợ.