Trang này mô tả các thông tin cơ bản về việc sử dụng API biểu đồ để tạo biểu đồ.
Chính sách sử dụng của Google Chart
Không có giới hạn về số lệnh gọi mỗi ngày mà bạn có thể thực hiện tới API Google Chart. Tuy nhiên, chúng tôi giữ quyền chặn mọi hoạt động sử dụng mà chúng tôi coi là lạm dụng.
Tổng quan
Xem biểu đồ trong tài liệu này
Tất cả hình ảnh biểu đồ trong tài liệu này đều được tạo trực tiếp bằng API biểu đồ. Để xem URL của hình ảnh bất kỳ, hãy làm như sau:
- Nếu bạn đang sử dụng Firefox, hãy nhấp chuột phải rồi chọn "View Image" (Xem hình ảnh) hoặc "Properties" (Thuộc tính).
- Nếu bạn đang sử dụng Internet Explorer, hãy nhấp chuột phải rồi chọn "Properties".
Để giúp URL dễ đọc hơn, tài liệu này thường hiển thị URL trên nhiều dòng. Khi sử dụng Google Chart API, bạn phải cung cấp URL trên một dòng duy nhất.
API Google Chart sẽ trả về một hình ảnh biểu đồ theo yêu cầu GET hoặc POST của URL. API này có thể tạo nhiều loại biểu đồ, từ biểu đồ hình tròn hoặc biểu đồ dạng đường cho đến mã QR và công thức. Tất cả thông tin về biểu đồ mà bạn muốn, chẳng hạn như dữ liệu, kích thước, màu sắc và nhãn của biểu đồ, đều là một phần của URL. (Đối với các yêu cầu POST, cách này sẽ hơi khác, nhưng bạn đừng lo về điều đó vào lúc này).
Để tạo biểu đồ đơn giản nhất có thể, tất cả URL của bạn cần chỉ định là loại biểu đồ, dữ liệu và kích thước. Bạn có thể nhập URL này trực tiếp vào trình duyệt hoặc trỏ đến URL bằng thẻ <img> trên trang web. Ví dụ: nhấp vào liên kết này để xem biểu đồ hình tròn:
https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World
Đường liên kết trên là ví dụ về một URL cơ bản của API biểu đồ. Tất cả URL của biểu đồ đều có định dạng như sau:
https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...
Tất cả URL đều bắt đầu bằng https://chart.googleapis.com/chart?, theo sau là các tham số chỉ định dữ liệu và giao diện trên biểu đồ. Các tham số là cặp name=value,
được phân tách bằng ký tự dấu và (&), và các tham số có thể
theo thứ tự bất kỳ, sau ?. Tất cả biểu đồ đều phải có
các tham số tối thiểu sau: cht (loại biểu đồ), chd (dữ liệu) và chs (kích thước biểu đồ). Tuy nhiên, có nhiều tham số khác cho các tuỳ chọn bổ sung và bạn có thể chỉ định bao nhiêu tham số bổ sung mà biểu đồ hỗ trợ.
Hãy kiểm tra URL ở trên chi tiết hơn:
| URL | Thành phần |
|---|---|
|
|
Hãy sao chép và dán URL này vào trình duyệt của bạn và thử thực hiện một vài thay đổi: thêm giá trị bổ sung vào dữ liệu (đừng quên thêm dấu phẩy trước mỗi giá trị dữ liệu mới). Thêm nhãn mới (đặt dấu | trước mỗi giá trị mới). Phóng to biểu đồ.
Cách tạo biểu đồ
Dưới đây là cách tạo biểu đồ hình ảnh:
- Quyết định loại biểu đồ. Xem thư viện để biết danh sách biểu đồ; loại biểu đồ được chỉ định bằng tham số
cht. Phác thảo tất cả các thành phần mà bạn muốn biểu đồ có (Trục, nhãn, nền, v.v.) và nếu cần, hãy tìm kích thước pixel cho các thành phần (tổng kích thước biểu đồ, kích thước chú giải, v.v.). Trước tiên, bạn nên đọc kỹ tài liệu về loại biểu đồ, nếu không thì có thể bạn sẽ cảm thấy khó chịu. - Tạo và định dạng dữ liệu biểu đồ. Dữ liệu
được chỉ định bằng tham số
chd. Bạn cần phải quyết định định dạng dùng cho dữ liệu của mình:- Chọn định dạng dữ liệu. Bạn có thể dùng định dạng văn bản đơn giản cho dữ liệu biểu đồ. Định dạng này rất dễ đọc nhưng tốn nhiều không gian hơn để gửi, hoặc sử dụng một trong các loại mã hoá nhỏ hơn để gửi, nhưng hạn chế phạm vi của các giá trị mà bạn có thể gửi.
- Quyết định xem có phải điều chỉnh dữ liệu theo tỷ lệ cho phù hợp với biểu đồ của bạn hay không. Các định dạng khác nhau sẽ hỗ trợ phạm vi giá trị khác nhau. Bạn nên mở rộng quy mô dữ liệu để dữ liệu bao gồm toàn bộ giá trị mà định dạng của bạn cho phép, giúp sự khác biệt trở nên rõ ràng hơn. Bạn có thể làm điều này bằng cách điều chỉnh dữ liệu cho phù hợp với định dạng dữ liệu mà bạn sử dụng, hoặc bạn có thể định dạng văn bản với tỷ lệ tuỳ chỉnh.
- Mã hoá dữ liệu của bạn nếu cần. Nếu bạn đã chọn một định dạng mã hoá, chúng tôi sẽ cung cấp một số JavaScript để hỗ trợ các loại mã hoá khác.
- Chỉ định kích thước biểu đồ. Kích thước biểu đồ được chỉ định bằng tham số
chs. Hãy xem tài liệu để biết định dạng và các giá trị tối đa. - Thêm các tham số bổ sung. Tài liệu của mỗi biểu đồ liệt kê các tham số không bắt buộc hiện có. Các lựa chọn thường dùng gồm có nhãn, tiêu đề và màu sắc. Xin lưu ý rằng tất cả văn bản nhãn hoặc văn bản tiêu đề phải được mã hoá UTF-8. Xin lưu ý rằng nhiều
thông số cho phép bạn nhập nhiều giá trị. Ví dụ: tham số
chmcho phép bạn đặt hình dạng trên một điểm dữ liệu duy nhất trên biểu đồ. Bạn có thể đặt hình dạng trên nhiều điểm dữ liệu bằng tham sốchm. Tuy nhiên, để thực hiện việc này, bạn không chỉ định tham sốchmnhiều lần trong URL (ví dụ: Sai:chm=square&chm=circle&chm=triangle). Thay vào đó, các tham số nhận nhiều giá trị sử dụng dấu phân tách, chẳng hạn như dấu phẩy hoặc thanh dọc, giữa nhiều giá trị trong cùng một tham số. Đối vớichm, đó là một thanh, vì vậy, bạn sẽ có nội dung tương tự như sau: RIGHT:chm=square|circle|triangle. Xem thông tin chi tiết về từng thông số để tìm hiểu cách chỉ định nhiều thông số. - Tạo chuỗi URL. URL này bắt đầu bằng
https://chart.googleapis.com/chart?, theo sau là tất cả các tham số bắt buộc (cht,chd,chs) và không bắt buộc. Lưu ý: Nếu đang sử dụng URL trong thẻ<img>, bạn sẽ phải thay đổi tất cả ký tự&thành&trong đường liên kết của mình. Ví dụ:<img src="https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World" />. - Sử dụng phương thức GET hoặc POST để nhận hình ảnh. GET là khi bạn nhập trực tiếp URL vào trình duyệt hoặc dùng trong thẻ
<img>. Tuy nhiên, URL chỉ có độ dài tối đa là 2K, vì vậy, nếu bạn có nhiều dữ liệu hơn hoặc thích máu, bạn nên cân nhắc sử dụng POST để thay thế, theo mô tả tại đây. - Tạo các khu vực có thể nhấp vào. Bạn có thể tuỳ ý tạo một bản đồ hình ảnh cho biểu đồ. Bản đồ này sẽ cho phép bạn thêm các siêu liên kết hoặc lượt nhấp vào các yếu tố vào các thành phần cụ thể trong biểu đồ. Xem Tạo bản đồ hình ảnh biểu đồ để biết chi tiết.
Bảng chú giải thuật ngữ trên biểu đồ
Sau đây là một số thuật ngữ quan trọng mà chúng tôi sử dụng trong tài liệu này:
- Bộ sách
- Một tập dữ liệu có liên quan trong một biểu đồ.
Yếu tố tạo thành chuỗi biểu đồ phụ thuộc vào loại biểu đồ: trong biểu đồ dạng đường, chuỗi là một đường đơn; trong biểu đồ hình tròn, mỗi mục là một lát cắt và tất cả các lát cắt cùng nhau là một chuỗi. Trong biểu đồ thanh, chuỗi dữ liệu là tất cả các thanh thuộc cùng một tập dữ liệu; các chuỗi khác nhau được nhóm cạnh nhau hoặc xếp chồng lên nhau, tuỳ thuộc vào loại biểu đồ thanh. Biểu đồ sau đây minh hoạ một biểu đồ thanh được phân nhóm có hai chuỗi, một chuỗi màu xanh dương đậm, một chuỗi màu xanh dương nhạt:
- Nhãn trục
- Giá trị số hoặc văn bản dọc theo mỗi trục. Trong biểu đồ trước đó, đó sẽ là các nhãn "Tháng 1", "Tháng 2", "Tháng 3",
"0", "50", "100".
Thành phần biểu đồ
Dưới đây là một số thành phần của biểu đồ:
- Vùng biểu đồ
- Khu vực thể hiện hình ảnh của loạt video. Xem thanh bên "Thành phần biểu đồ" để biết thêm chi tiết.
- Chú giải
- Một vùng nhỏ trên biểu đồ mô tả bộ sách. Trong biểu đồ trên, đó là phần liệt kê "Mèo" và "Chó".
- Tham số
- Cặp khoá=giá trị được dùng trong
URL. Ví dụ:
chxt=x, trong đóchxtlà tên tham số vàxlà giá trị thông số. - GET và POST
- Hai phương thức gửi URL của biểu đồ. GET thường được thực hiện bằng cách nhập URL vào trình duyệt hoặc đặt URL này làm nguồn của thẻ
<img>. Việc thực hiện yêu cầu POST phức tạp hơn, nhưng có thể bao gồm nhiều dữ liệu hơn. Lý do chính để sử dụng phương thức POST thay vì GET là vì yêu cầu POST có thể lấy nhiều dữ liệu hơn so với yêu cầu GET (16K ký tự so với 2K ký tự). Chủ đề POST được trình bày tại đây. - Nhân vật Ống kính
- Ký tự
|, thường được dùng làm dấu phân tách giá trị thông số, tức là một ký tự để chia nhỏ nhiều giá trị. Dấu phẩy và ký hiệu và (&) cũng được dùng làm dấu phân cách trong URL của biểu đồ. - Biểu đồ kết hợp
- Một biểu đồ kết hợp từ hai loại biểu đồ khác nhau: ví dụ: biểu đồ thanh có dạng đường hoặc biểu đồ dạng đường có các điểm đánh dấu hình nến. Xem Biểu đồ kết hợp.
Tối ưu hoá
Giờ đây, bạn đã tìm hiểu các kiến thức cơ bản về cách tạo biểu đồ, sau đây là một số cách tối ưu hoá mà bạn có thể sử dụng.
Sử dụng POST
URL có độ dài giới hạn là 2K. Vì vậy, nếu biểu đồ của bạn có nhiều dữ liệu hơn thế, bạn sẽ phải sử dụng phương thức POST thay vì GET, như mô tả tại đây. GET là khi bạn nhập URL của biểu đồ vào thanh URL của trình duyệt hoặc dùng URL này làm nguồn của phần tử <img> trong một trang web. POST yêu cầu bạn phải lập trình thêm bằng một ngôn ngữ khác, chẳng hạn như PHP hoặc PERL.
Tạo biểu đồ trong JavaScript
Bạn có thể sử dụng Google Visual API để tạo biểu đồ hình ảnh cho mình. Google Visual API là một API dựa trên JavaScript, cung cấp cho bạn các công cụ để tạo, lọc và thao tác với dữ liệu hoặc để truy vấn Bảng tính Google hoặc các trang web khác để lấy dữ liệu. Bạn có thể sử dụng API Hình ảnh để tạo dữ liệu, sau đó yêu cầu API này gọi API Biểu đồ hình ảnh để hiển thị biểu đồ trên trang. Để biết thêm thông tin, hãy xem tài liệu về Biểu đồ hình ảnh chung hoặc tìm bất kỳ biểu đồ nào của Google được đánh dấu (Hình ảnh) trong Thư viện hình ảnh.