Trang này mô tả cách tạo nhiều chú thích, bong bóng, ghim và thành phần đồ hoạ khác có thể được yêu cầu qua URL hoặc được thêm làm điểm đánh dấu trên các biểu đồ khác.
Mục lục
Giới thiệu
API Biểu đồ cho phép bạn tạo nhiều chú thích, ghim hoặc bong bóng thú vị kết hợp văn bản và hình ảnh. Những mục này được gọi là biểu tượng động.
Bạn có thể tạo một hình ảnh biểu tượng động độc lập hoặc đặt một biểu tượng động ở đầu biểu đồ làm loại điểm đánh dấu bằng cách sử dụng tham số chem. Trang này sẽ mô tả cách tạo biểu tượng động dưới dạng
hình ảnh độc lập hoặc làm điểm đánh dấu trên một biểu đồ khác. Trang tham khảo Biểu tượng động của bản đồ hoạ thông tin mô tả tất cả các loại loại điểm đánh dấu động hiện có.
Cú pháp để tạo biểu tượng động phụ thuộc vào việc bạn muốn dùng biểu tượng độc lập hay làm điểm đánh dấu động trong một biểu đồ khác.
Biểu tượng độc lập
Bạn có thể yêu cầu một hình ảnh biểu tượng động giống như cách yêu cầu bất kỳ biểu đồ nào khác. Một biểu tượng động độc lập hỗ trợ một bộ tham số khác so với các biểu đồ khác:
| Thông số | Bắt buộc hoặc không bắt buộc | Nội dung mô tả |
|---|---|---|
chst=<icon_string_constant> |
Bắt buộc | Mô tả loại biểu tượng cần tạo.
|
chld=<icon_data> |
Bắt buộc | Dữ liệu cụ thể được dùng để mô tả kích thước, hướng xoay, văn bản của biểu tượng và các dữ liệu bắt buộc khác.
|
cht |
KHÔNG SỬ DỤNG | Các biểu đồ biểu tượng động độc lập không sử dụng tham số cht. |
chs |
KHÔNG SỬ DỤNG | Các biểu đồ biểu tượng động độc lập không sử dụng tham số chs. |
chd |
KHÔNG SỬ DỤNG | Dùng tham số chld để truyền dữ liệu sang một biểu tượng động độc lập. |
Ví dụ
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
Điểm đánh dấu linh động
Bạn có thể nhúng một biểu tượng động làm loại điểm đánh dấu trên một số loại biểu đồ bằng cách dùng tham số chem. Hãy xem tài liệu về chem để tìm hiểu cách thực hiện.
Ví dụ
https://chart.googleapis.com/chart?
chs=300x140
cht=lc&chco=FF9900,224499
chd=t:75,74,66,30,10,5,3,1
chls=1|1
chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0
chm=v,ccccFF,0,::.2,2
Các đặc điểm biểu tượng phổ biến
Hầu hết các biểu tượng đều có thể liên kết với các chuỗi văn bản hoặc bóng.
Chuỗi văn bản
Tất cả văn bản hiển thị được gửi đến API Biểu đồ phải được mã hoá UTF-8, sau đó được mã hoá URL.
Việc này chỉ ảnh hưởng đến các ký tự không an toàn cho URL (các ký tự an toàn cho URL chủ yếu là các chữ cái tiếng Anh a-z cả chữ hoa và chữ thường, cùng với một nhóm dấu câu nhỏ). Ví dụ: giá trị được mã hoá bằng UTF-8 và URL cho chữ cái "è" là "%C3%A8", còn đối với ký tự tiếng Trung 駅 là "%E9%A7%85". Hầu hết trình duyệt sẽ cho phép bạn sử dụng một giá trị chưa mã hoá trong chuỗi URL (ví dụ: 駅) rồi mã hoá cho bạn đằng sau.
Tuy nhiên, có thể ai đó đang xem URL biểu đồ của bạn đang sử dụng một trình duyệt không làm điều này. Vì vậy, tốt nhất bạn nên sử dụng UTF-8 và mã hoá URL tất cả ký tự không phải ASCII trong chuỗi văn bản. Xin lưu ý rằng mã này chỉ dành cho văn bản xuất hiện trong bong bóng trò chuyện hoặc ghim, không áp dụng cho ký tự &, | hoặc các ký tự khác trong cú pháp URL.
Khi sử dụng tham số chem để chỉ định điểm đánh dấu biểu tượng động, bạn cũng phải thoát một số ký tự nhất định trong văn bản, như mô tả trong tài liệu chem.
Bóng
Bạn có thể thêm bóng cho nhiều biểu tượng hoặc thậm chí là vẽ bóng cho một số biểu tượng mà không cần đến chính biểu tượng đó!
Biểu tượng bị ẩn 
Nhiều biểu tượng trong số này có thể được vẽ có hoặc không có bóng. Nếu bạn chọn cách đổ bóng, thì tên biểu tượng sẽ có một phiên bản kết thúc bằng _withshadow và một phiên bản khác không có đuôi đó. Bạn có thể chỉ định biểu tượng có phần cuối cùng, tuỳ thuộc vào việc bạn có muốn đổ bóng hay không.
Dưới đây là ví dụ về bong bóng văn bản trung bình và một ghim có và không có bóng:
 chst=d_bubble_icon_text_big |
 chst=d_bubble_icon_text_big_withshadow |
 chst=d_map_pin_icon |
 chst=d_map_pin_icon_withshadow |
Bóng đứng 
Một số loại biểu tượng cho phép bạn tự vẽ bóng của biểu tượng. Bạn nên thực hiện việc này nếu đang sử dụng một số biểu tượng đổ bóng chồng chéo trên một hình ảnh đồ hoạ và các biểu tượng này gần nhau đến mức bóng của một biểu tượng đổ lên một biểu tượng khác. Ví dụ: đây là hai bong bóng bị bóng, Robert vẽ trước, sau đó là Alice:
Hãy chú ý đến cách bóng của Alice bao phủ một phần Robert. Để khắc phục lỗi này, bạn có thể vẽ bóng Alice trước, sau đó là bong bóng Robert, sau đó là Alice không có bóng. Về mặt ánh sáng và bóng có lẽ không hoàn toàn thực tế, nhưng cách này giúp tránh việc một bong bóng bị bóng của một bong bóng khác che khuất:
chem=
y;s=bubble_text_small_shadow;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice, no shadow
y;s=bubble_text_small_withshadow;d=bbtr,Robert,FF8,000;ds=0;dp=3.5;py=1 // Robert with shadow
y;s=bubble_text_small;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice shadow
Tất cả các điểm đánh dấu đều chỉ định cùng thứ tự z là 1 (py=1). Vì vậy, các điểm đánh dấu sẽ được vẽ theo thứ tự được liệt kê ở đầu các thành phần biểu đồ (đường trong biểu đồ). Đầu tiên là bóng của Alice được vẽ, sau đó là bong bóng Robert ở trên và cuối cùng là bong bóng Alice ở trên cùng.
Hãy xem tài liệu về loại biểu tượng cụ thể để tìm hiểu xem bạn có thể chỉ vẽ bóng của biểu tượng đó hay không.
Biểu tượng theo bối cảnh
Bạn có thể chỉ định một biểu tượng để thay đổi màu sắc, kích thước hoặc cách xếp chồng theo điểm được gán. Các loại biểu tượng này chỉ có sẵn dưới dạng điểm đánh dấu biểu tượng động (tham số chem), không phải dưới dạng biểu tượng độc lập.
Các biểu tượng này có thể hiển thị trên một chuỗi chứ không phải chuỗi chỉ định màu sắc, kích thước hoặc thông tin xếp chồng của chúng. Điều này có nghĩa là giá trị ds của tham số chem chỉ định chuỗi dữ liệu sẽ hiển thị biểu tượng, nhưng các giá trị để xác định kích thước hoặc màu sắc của biểu tượng được chỉ định trong các tham số được cung cấp dưới đây. Một cách hữu hiệu để làm điều này là sử dụng chuỗi dữ liệu ẩn cho dữ liệu biểu tượng nhưng hiển thị các biểu tượng trên một đường hoặc thanh hiển thị. Sau đây là một số ví dụ:
| Biểu tượng hiển thị trên chuỗi video nguồn | Biểu tượng hiển thị trên chuỗi chủ đề không phải nguồn | Biểu tượng sử dụng bộ sách bị ẩn |
|---|---|---|
 |
 |
 |
chem=
|
chem=
|
chd=t1:
|
Các loại điểm đánh dấu ngữ cảnh
| Loại điểm đánh dấu | Giá trị của chem giây |
Ví dụ: |
|---|---|---|
| Biến thể màu sắc | s=cm_color |
 |
| Biến thể kích thước | s=cm_size |
 |
| Biến thể màu sắc và kích thước | s=cm_color_size |
 |
| Biến thể xếp chồng | s=cm_repeat |
 |
| Xếp chồng và biến thể màu sắc | s=cm_repeat_color |
 |
Chuỗi căn chỉnh cho biểu tượng theo bối cảnh
Các biểu tượng ngữ cảnh hỗ trợ một chuỗi căn chỉnh không bắt buộc để chỉ định căn chỉnh và độ lệch của biểu tượng cho điểm dữ liệu. Chuỗi này có cú pháp sau:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- alignment
- Hai chữ cái mô tả cách căn chỉnh của biểu tượng vào điểm. Ví dụ như
tl(trên cùng bên trái) vàrb(dưới cùng bên phải). Hãy xem phần mô tả tham số alignment_string củachemđể xem trang thông tin và nội dung mô tả đầy đủ. - h_anchor_offset
- [Không bắt buộc] Độ lệch ngang của điểm neo, tính bằng pixel. Các giá trị kể cả số 0 phải đứng sau dấu + hoặc -. Quan trọng: Bạn phải mã hoá URL + dưới dạng %2B.
- v_anchor_offset
- [Không bắt buộc] Độ lệch dọc của điểm neo, tính bằng pixel. Các giá trị kể cả 0 phải đứng trước dấu + hoặc -. Quan trọng: Bạn phải mã hoá URL + dưới dạng %2B.
Xin lưu ý rằng bạn cũng có thể sử dụng thành phần of của tham số chem để chỉ định độ lệch ngang và dọc. Nếu bạn chỉ định cả thành phần of và giá trị h_anchor_offset v_anchor_offset thì mọi độ lệch sẽ được áp dụng cho biểu tượng của bạn.
Ví dụ:
 hb-0-0Theo chiều ngang, ở dưới cùng, dưới cùng Không có độ lệch |
 lb-0-0Dưới cùng bên trái Không có độ lệch |
 rb-0-0Dưới cùng bên phải Không có độ lệch |
 ht-0-0Trên cùng theo chiều ngang Không có độ lệch |
 hb-20-0Ngang, chính giữa dưới cùng –20 ngang 0 dọc |
 hb%2b20-0Theo chiều ngang, chính giữa dưới cùng +20 chiều ngang 0 dọc |
 hb-0%2b10Theo chiều ngang, ở dưới cùng, dưới cùng 0 chiều ngang +10 chiều dọc |
 hb-0-20Theo chiều ngang, ở dưới cùng, dưới cùng 0 ngang -20 dọc |
Biến thể màu sắc (cm_color)
Bạn có thể thay đổi màu của điểm đánh dấu biểu đồ theo bối cảnh theo điểm mà điểm đánh dấu đó đại diện. Bạn phải chỉ định dải màu và giá trị dữ liệu sẽ được điều chỉnh theo tỷ lệ theo một màu tương ứng trong phạm vi đó.
Cú pháp
chem=y;s=cm_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<icon_size>,<outline_color>,<alignment>
- <icon_shape>
- Biểu tượng để sử dụng. Chỉ định chuỗi mã nhận dạng để xác định một trong những hình ảnh được liệt kê ở cuối trang.
- <color_data_series>
- Chỉ mục từ 0 của chuỗi dữ liệu dùng để thay đổi màu sắc của các biểu tượng.
- <low_color>
- Giá trị màu thấp trong dải ô, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #). Giá trị này được liên kết với giá trị thấp nhất có thể trong phạm vi dữ liệu hiện có.
- <middle_color>
- Giá trị màu ở giữa trong dải ô, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #). Giá trị này được liên kết với giá trị ở giữa trong dải ô dữ liệu có sẵn.
- <high_color>
- Giá trị màu cao trong dải ô, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #). Giá trị này tương ứng với giá trị cao nhất có thể trong phạm vi dữ liệu có sẵn.
- <icon_size>
- Kích thước của biểu tượng, tính bằng pixel. Các giá trị sau được hỗ trợ: 12, 16, 24.
- <outline_color>
- Màu viền của biểu tượng, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #).
- <alignment>
- Một chuỗi không bắt buộc mô tả cách căn chỉnh và bù trừ của biểu tượng.
Ví dụ
|
 chem=y;s=cm_color; |
Biến thể kích thước (cm_size)
Bạn có thể thay đổi kích thước của một điểm đánh dấu biểu đồ theo ngữ cảnh tuỳ theo chuỗi dữ liệu bạn chọn.
Cú pháp
chem=y;s=cm_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<fill_color>,<alignment>
- <icon_type>
- Hình dạng của biểu tượng. Chọn một trong các giá trị sau:
maps_pin,diskhoặcsquare. - <size_data_series>
- Chỉ mục từ 0 của chuỗi dữ liệu dùng để thay đổi kích thước của các biểu tượng.
- <zero_value_size>
- Kích thước cơ bản của biểu tượng, ở giá trị dữ liệu tối thiểu của bộ sách.
- <size_multiplier>
- Hệ số tỷ lệ kích thước. Giá trị này được nhân với mức chênh lệch giữa giá trị dữ liệu của mỗi biểu tượng và giá trị chuỗi tối thiểu để tính kích thước biểu tượng cuối cùng. Do đó, biểu tượng có giá trị dữ liệu bằng 0 sẽ không bị hệ số này ảnh hưởng.
- <min_size>
- Kích thước tối thiểu của mọi biểu tượng, tính bằng pixel.
- <outline_color>
- Màu viền của biểu tượng, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #).
- <fill_color>
- Màu nền cho biểu tượng, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #).
- <alignment>
- Một chuỗi không bắt buộc mô tả cách căn chỉnh và bù trừ của biểu tượng.
Ví dụ
| Ví dụ cơ bản. Biểu tượng có giá trị bằng 0 sẽ có kích thước giá trị bằng 0, tức là 30 pixel. Kích thước tăng cùng với dữ liệu. |  chd=t:0,10,20,30,40,50,60,70 |
Trong ví dụ này, các biểu tượng lấy dữ liệu kích thước từ đường màu vàng nhưng lại hiển thị trên đường màu xanh dương.
|
 chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
Biến thể màu sắc và kích thước (cm_color_size)
Bạn có thể thay đổi cả màu sắc và kích thước của điểm đánh dấu biểu đồ theo bối cảnh, tuỳ theo chuỗi dữ liệu mà bạn chọn.
Cú pháp
chem=y;s=cm_color_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<alignment>
- <icon_type>
- Hình dạng của biểu tượng. Chọn một trong các giá trị sau:
maps_pin,diskhoặcsquare. - <color_data_series>
- Chỉ mục từ 0 của chuỗi dữ liệu dùng để thay đổi màu sắc của các biểu tượng.
- <low_color>
- Giá trị màu thấp trong dải ô, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #). Giá trị này được liên kết với giá trị thấp nhất có thể trong phạm vi dữ liệu hiện có.
- <middle_color>
- Giá trị màu ở giữa trong dải ô, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #). Giá trị này được liên kết với giá trị ở giữa trong dải ô dữ liệu có sẵn.
- <high_color>
- Giá trị màu cao trong dải ô, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #). Giá trị này tương ứng với giá trị cao nhất có thể trong phạm vi dữ liệu có sẵn.
- <size_data_series>
- Chỉ mục từ 0 của chuỗi dữ liệu dùng để thay đổi kích thước của các biểu tượng.
- <zero_value_size>
- Kích thước cơ bản của biểu tượng, ở giá trị dữ liệu tối thiểu của bộ sách.
- <size_multiplier>
- Hệ số tỷ lệ kích thước. Giá trị này được nhân với mức chênh lệch giữa giá trị dữ liệu của mỗi biểu tượng và giá trị chuỗi tối thiểu để tính kích thước biểu tượng cuối cùng. Do đó, biểu tượng có giá trị dữ liệu bằng 0 sẽ không bị hệ số này ảnh hưởng.
- <min_size>
- Kích thước tối thiểu của mọi biểu tượng, tính bằng pixel.
- <outline_color>
- Màu viền của biểu tượng, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #).
- <alignment>
- Một chuỗi không bắt buộc mô tả cách căn chỉnh và bù trừ của biểu tượng.
Ví dụ
Ví dụ này sử dụng 2 dòng. Các ghim sử dụng dữ liệu màu của chuỗi hiển thị, nhưng sử dụng dữ liệu kích thước của chuỗi khác.
|
 chd=s:0akAZtnkmi,nbMPJOKXXS |
Biến thể xếp chồng (cm_repeat)
Bạn có thể thay đổi chiều cao của một ngăn xếp biểu tượng theo giá trị dữ liệu tại một điểm cụ thể.
Cú pháp
chem=y;s=cm_repeat;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<fill_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- Biểu tượng để sử dụng. Chỉ định chuỗi mã nhận dạng để xác định một trong những hình ảnh được liệt kê ở cuối trang.
- <repeat_series_index>
- Chỉ số từ 0 của chuỗi dữ liệu dùng để tính số lượng biểu tượng cần đặt tại thời điểm này.
- <scaling_factor>
- Giá trị của chuỗi dữ liệu nguồn được chia theo tỷ lệ từ 0 đến 1 rồi nhân với giá trị này để xác định số điểm đánh dấu cần đặt tại điểm này. Một phần giá trị bị cắt bớt.
- <stacking_direction>
- Hướng xếp chồng: "h" (chữ thường) đối với chiều ngang hoặc "V" (chữ hoa) đối với chiều dọc.
- <icon_size>
- Kích thước của mỗi điểm đánh dấu, tính bằng pixel. Các giá trị sau được hỗ trợ: 12, 16, 24.
- <fill_color>
- Màu nền cho biểu tượng, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #).
- <outline_color>
- Màu viền của biểu tượng, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #).
- <spacing>
- Khoảng cách giữa mỗi điểm đánh dấu trong nhóm ảnh, tính bằng pixel.
- <alignment>
- Một chuỗi không bắt buộc mô tả cách căn chỉnh và bù trừ của biểu tượng.
Ví dụ
Ví dụ này sử dụng chuỗi dữ liệu giả thứ hai. Giá trị này không được hiển thị trên biểu đồ mà được dùng như một cách để phân tách đồng đều tất cả các ngăn xếp, bắt đầu từ cuối biểu đồ.
|
 chd=s1:0akAZtnkmi,AAAAAAAAAA
|
Xếp chồng và biến thể màu sắc (cm_repeat_color)
Bạn có thể thay đổi cả chiều cao và màu sắc của ngăn xếp biểu tượng, theo giá trị dữ liệu tại một điểm cụ thể.
Cú pháp
chem=y;s=cm_repeat_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- Biểu tượng để sử dụng. Chỉ định chuỗi mã nhận dạng để xác định một trong những hình ảnh được liệt kê ở cuối trang.
- <repeat_series_index>
- Chỉ số từ 0 của chuỗi dữ liệu dùng để tính số lượng biểu tượng cần đặt tại thời điểm này.
- <scaling_factor>
- Giá trị của chuỗi dữ liệu nguồn được chia theo tỷ lệ từ 0 đến 1 rồi nhân với giá trị này để xác định số điểm đánh dấu cần đặt tại điểm này. Một phần giá trị bị cắt bớt.
- <stacking_direction>
- Hướng xếp chồng: "h" (chữ thường) đối với chiều ngang hoặc "V" (chữ hoa) đối với chiều dọc.
- <icon_size>
- Kích thước của mỗi điểm đánh dấu, tính bằng pixel. Các giá trị sau được hỗ trợ: 12, 16, 24.
- <color_data_series>
- Chỉ mục từ 0 của chuỗi dữ liệu dùng để thay đổi màu sắc của các biểu tượng.
- <low_color>
- Giá trị màu thấp trong dải ô, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #). Giá trị này được liên kết với giá trị thấp nhất có thể trong phạm vi dữ liệu hiện có.
- <middle_color>
- Giá trị màu ở giữa trong dải ô, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #). Giá trị này được liên kết với giá trị ở giữa trong dải ô dữ liệu có sẵn.
- <high_color>
- Giá trị màu cao trong dải ô, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #). Giá trị này tương ứng với giá trị cao nhất có thể trong phạm vi dữ liệu có sẵn.
- <outline_color>
- Màu viền của biểu tượng, dưới dạng màu thập lục phân HTML gồm 3 hoặc 6 chữ số (không có dấu #).
- <spacing>
- Khoảng cách giữa mỗi điểm đánh dấu trong nhóm ảnh, tính bằng pixel.
- <alignment>
- Một chuỗi không bắt buộc mô tả cách căn chỉnh và bù trừ của biểu tượng.
Ví dụ
|
 chem= |