Quan trọng: Kể từ ngày 20 tháng 4 năm 2012, phần Biểu đồ hình ảnh của Công cụ biểu đồ của Google đã chính thức không còn được dùng nữa. Ứng dụng này sẽ tiếp tục hoạt động theo chính sách về việc ngừng cung cấp 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 API Google Biểu đồ tạo ra. Vui lòng đọc tài liệu về API Biểu đồ trước khi thử 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 hình ảnh trực quan này, không giống như giới hạn 2K trong lệnh gọi trực tiếp đến API Biểu đồ.
Tất cả dữ liệu được chuyển vào 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) được truyền dưới dạng
lựa chọn.
Bởi: 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 ý rằng trong biểu đồ thanh được bao bọc, bạn không cần chỉ định chxt='x' như khi bạn tự gọi biểu đồ; nếu bạn không chỉ định một trục, thì 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 định dạng cho biểu đồ bản đồ và một định dạng 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 Số JavaScript.
Lưu ý Bạn không nên mã hoá URL 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 đồ
Biểu đồ bản đồ lấy một bảng dữ liệu có hai cột bắt buộc:
- Cột đầu tiên – [string] Mã quốc gia hoặc tiểu bang/tỉnh.
- Cột thứ hai – [number] Giá trị của quốc gia hoặc tiểu bang đó.
Hãy 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 tùy chọn (một cột ở đầu, một cộ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 đại diện cho 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ác cột tiếp theo – Số lượng cột số bất kỳ, mỗi cột đại diện cho một chuỗi dữ liệu.
- 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 đại diện cho một nhãn điểm dữ liệu của các biểu đồ hỗ trợ cột đó. 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ẽ được hiển thị theo nhiều cách khác nhau, tuỳ thuộc vào loại biểu đồ. Hãy xem tài liệu về biểu đồ của bạn.
Lưu ý về chỉ mục cột: Hình ảnh trực quan của Biểu đồ hình ảnh chung sẽ loại bỏ 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 tuỳ chọn, phương thức và sự kiện được xác định trên trang này sẽ bao gồm các cột chuỗi trong số lượng chỉ mục. Tuy nhiên, các chỉ mục cột trong mọi tuỳ chọn do dịch vụ API Biểu đồ xử lý (ví dụ: tuỳ chọn chm) sẽ bỏ qua các cột chuỗi trong số lượng chỉ mục.
Các lựa chọn cấu hình
Sau đây là các lựa chọn được xác định cho hình ảnh trực quan này. Hãy xác định chúng trong các đối tượng tuỳ chọn được truyền vào phương thức draw() của hình ảnh trực quan.
Không phải loại biểu đồ nào sau đây cũng được hỗ trợ. Hãy xem tài liệu dành cho loại biểu đồ hình ảnh tĩnh của bạn. Bạn có thể truyền bất kỳ tham số URL nào của API Biểu đồ dưới dạng tuỳ chọn. Ví dụ: tham số URL chg=50,50 trong hình ảnh trực quan của Biểu đồ sẽ được chỉ định theo cách sau: options['chg'] = '50,50'.
Lưu ý về màu: Các tuỳ chọn màu như colors, color và backgroundColor được chỉ định trong đị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 có thêm số thập lục phân thứ tư (không bắt buộc) để biểu thị độ trong suốt. Các màu mà con người có thể đọc được, chẳng hạn như "đỏ", "xanh lục", "xanh dương", v.v. không được hỗ trợ. Định dạng màu của API Biểu đồ không bao gồm ký hiệu # ở đầu, nhưng các lựa chọn trực quan hoá biểu đồ hình ảnh chung sẽ chấp nhận các mã màu có hoặc không có #.
| Tên | Loại | Mặc định | Nội dung mô tả |
|---|---|---|---|
| annotationColumns | Array<object> | 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 mảng gán một nhãn được định dạng cho một điểm dữ liệu trên biểu đồ. Tuỳ chọn này chỉ dành cho những biểu đồ hỗ trợ điểm dữ liệu (xem chủ đề được liên kết để tìm hiểu xem chủ đề nào được liên kết) và bảng dữ liệu phải có ít nhất một 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, 12 pixel, lấy văn bản từ cột 0 và được gán cho điểm dữ liệu trong cột 2 của cùng hàng: |
| backgroundColor | string | "#FFFFFF" (màu trắng) | Màu nền cho biểu đồ ở Định dạng màu của API biểu đồ. |
| màu | string | Tự động | Chỉ định một màu cơ bản để sử dụng cho tất cả các chuỗi; mỗi chuỗi sẽ là một độ chuyển màu của màu được chỉ định. Màu được chỉ định trong Định dạng màu của API Biểu đồ.
Sẽ bỏ qua nếu colors được chỉ định. |
| màu | Mảng<string> | Tự động | Sử dụng thuộc tính 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, gói quanh phầ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ả các chuỗi, hãy sử dụng tuỳ chọn color. |
| enableEvents | boolean | false | Khiến các 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 một số loại biểu đồ cụ thể. Hãy xem mục Sự kiện bên dưới. |
| tô màu | boolean | false | Nếu đúng, hãy điền vào vùng bên dưới mỗi dòng. Chỉ dành cho biểu đồ dạng đường. |
| firstHiddenColumn | number | không có | Chỉ mục cột dữ liệu. Cột được liệt kê và tất cả các cột sau đây sẽ không được dùng để vẽ các thành phần trong 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 chuỗi được tính vào số lượng chỉ mục này. |
| độ cao | number | 200 | Chiều cao của biểu đồ, tính bằng pixel. Nếu bị thiếu hoặc không nằm trong phạm vi chấp nhận được, thì chiều cao của phần tử chứa sẽ được sử dụng. Nếu giá trị này cũng nằm ngoài phạm vi được chấp nhận, thì chiều cao mặc định sẽ được sử dụng. |
| nhãn | string | "none" | [Chỉ biểu đồ hình tròn] Nhãn nào, nếu có, cần hiển thị cho từng lát. Chọn trong số các giá trị sau:
|
| chú thích | string | "phải" | Vị trí hiển thị chú thích trên biểu đồ, so với biểu đồ. Chỉ định một trong các giá trị sau: "top", "bottom", "left", "right", "none". Bị bỏ qua trong các biểu đồ không bao gồm 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ị tối đa hiển thị trên thang. Bỏ qua đối với 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. Giá trị này sẽ bị bỏ qua đối với các biểu đồ thanh khi bảng có nhiều cột dữ liệu. |
| phút | number | Giá trị dữ liệu Mimimum | Giá trị nhỏ nhất hiển thị trên thang. Bỏ qua đối với 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 có giá trị mặc định là 0. Giá trị này sẽ bị bỏ qua đối với các biểu đồ thanh khi bảng có nhiều cột dữ liệu. |
| showCategoryLabels | 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. |
| showValueLabels | boolean | đúng | True 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 đã chỉ định. Số này là một chỉ mục từ 0 trong bảng, trong đó 0 là cột dữ liệu đầu tiên. Màu được gán cho một cột sẽ giống như khi tất cả các cột được kết xuất. Không thể dùng với biểu đồ hình tròn hoặc biểu đồ bản đồ. |
| title | string | Chuỗi không có nội dung | Tiêu đề biểu đồ. Nếu không được chỉ định, sẽ không có tiêu đề nào được hiển thị. Tham số tương đương của biểu đồ là chtt. |
| valueLabelsInterval | 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ị nhãn trục tại (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 bị thiếu hoặc không nằm trong phạm vi chấp nhận được, thì chiều rộng 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 được chấp nhận, 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ề | Nội dung mô tả |
|---|---|---|
draw(data, options) |
Không có | Vẽ bản đồ. |
getImageUrl() |
Chuỗi | Trả về URL API của Google Biểu đồ dùng để yêu cầu biểu đồ. Xin lưu ý rằng giá trị này có thể dài hơn 2.000 ký tự. Hãy xem API Google Biểu đồ để biết thêm chi tiết. |
Sự kiện
Nếu bạn đặt thuộc tính enableEvents thành true, thì các biểu đồ hỗ trợ
sẽ gửi 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ả những sự kiện này đều trả về một đối tượng event có các thuộc tính sau:
type– 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. Thêm tham 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 | Nội dung mô tả | giá trị loại |
|---|---|---|
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 phần tử biểu đồ. | "di chuột qua" |
onmouseout |
Được kích hoạt khi người dùng di chuột ra khỏi một phần tử trong biểu đồ. | "nhấp chuột" |
onclick |
Được kích hoạt khi người dùng nhấp vào một phần tử biểu đồ. | "nhấp chuột" |
Những biểu đồ nào hỗ trợ sự kiện?
Mọi biểu đồ hỗ trợ thông số chof=json
đều hỗ trợ các sự kiện gửi (nghĩa là tất cả biểu đồ, ngoại trừ biểu đồ đặc biệt, ví dụ:
mã QR).
Ví dụ về xử lý sự kiện
Dưới đây là ví dụ về 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 về dữ liệu
Dữ liệu được gửi đến dịch vụ Google Chart API.
Bản địa hoá
Hình ảnh trực quan này hỗ trợ mọi nội dung bản địa hoá mà dịch vụ Google Biểu đồ hỗ trợ.