Lưu ý quan trọng: Mặc dù Google Biểu đồ động và tương tác vẫn được duy trì, nhưng chúng tôi đã chính thức ngừng sử dụng Biểu đồ hình ảnh tĩnh của Google từ năm 2012. Tính năng này đã bị tắt vào ngày 18 tháng 3 năm 2019.
Trang này mô tả cách tạo nhiều chú thích, bong bóng trò chuyện, ghim và các hình ảnh đồ hoạ khác có thể tạo bằng URL.
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
- Giới thiệu
- Cú pháp
- Các loại biểu tượng
- Bong bóng
- Ghim
- Ghi chú phong cách vui nhộn
- Ghi chú dự báo thời tiết
- Khối văn bản phông chữ có đường viền (Chỉ văn bản)
- Khối văn bản phông chữ có đường viền (Văn bản + Biểu tượng)
- Danh sách cờ và biểu tượng có sẵn
- Chuỗi văn bản
- Bóng
Giới thiệu
Bạn có thể 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.
Cú pháp
URL gốc: https://chart.googleapis.com/chart?
Biểu tượng động hỗ trợ các tham số sau ký tự ? trong URL gố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, chế độ xoay, văn bản và các dữ liệu bắt buộc khác của biểu tượng.
|
Các loại biểu tượng
| Loại | Ví dụ |
|---|---|
| Bong bóng – Chọn bong bóng văn bản nhỏ hoặc lớn, có hoặc không có biểu tượng. |     |
| Ghim – Các loại ghim có thể đơn giản, có gắn dấu sao hoặc nghiêng và có thể có một biểu tượng, một chữ cái hoặc các chuỗi văn bản dài hơn. |       |
| Ghi chú kiểu vui nhộn có văn bản và tiêu đề không bắt buộc |  |
| Ghi chú dự báo thời tiết có tiêu đề, văn bản và biểu tượng thời tiết |  |
| Khối văn bản có đường viền nhiều dòng, không có biểu tượng |  |
| Khối văn bản có đường viền đơn có biểu tượng |   |
Bong bóng
Bong bóng trò chuyện có nhiều tổ hợp tính năng: kích thước lớn hoặc nhỏ, có hoặc không có biểu tượng, văn bản một dòng hoặc nhiều dòng. Bảng sau đây mô tả các loại bong bóng trò chuyện và cú pháp cho mỗi loại. Nội dung mô tả của từng giá trị thông số được mô tả ở bên dưới bảng.
Một vài lưu ý bổ sung:
- Tất cả bong bóng sẽ đổi kích thước để phù hợp với chiều rộng và chiều cao của văn bản mà bạn nhập.
- Hằng số bong bóng hỗ trợ một biến thể kết thúc bằng
_withshadow. Nếu bạn sử dụng biến thể_withshadow, biến thể này sẽ thêm bóng vào bên dưới bong bóng của bạn.
| Văn bản | Biểu tượng | Cú pháp | Chỉ đổ bóng | Ví dụ: |
|---|---|---|---|---|
| Một dòng | Không | chst= |
chst= |
 chst=d_bubble_text_small |
| Một dòng | Có | chst= |
chst= |
 chst=d_bubble_icon_text_small |
| Một dòng | Có |
chst= |
chst= |
 chst=d_bubble_icon_text_big |
| Nhiều dòng | Không | chst= |
chst= |
 chst=d_bubble_texts_big |
| Nhiều dòng | Có |
|
chst= |
 chst=d_bubble_icon_texts_big |
Cú pháp
- <icon_string> (chuỗi biểu tượng)
- Một chuỗi chỉ định một trong các biểu tượng được mô tả ở cuối tài liệu này.
- <frame_style>
- Hướng đuôi. Chọn các hằng số hướng đuôi sau:
bb– Khung bóng bay, đuôi ở dưới cùng bên trái
bbtl– Khung bóng bay, đuôi ở trên cùng bên trái
bbtr– Khung bóng bay, đuôi ở trên cùng bên phải
bbbr– Khung bóng bay, đuôi ở dưới cùng bên phải
bbT– Khung bóng bay, không có đuôi
edge_bl– Khung viền, đuôi ở cạnh dưới, mép trái
edge_bc– Khung viền, đuôi ở cạnh dưới, ở giữa
edge_br– Khung viền, đuôi ở cạnh dưới, mép phải
edge_tl– Khung viền, đuôi ở cạnh trên, cạnh trái
edge_tc– Khung viền, đuôi ở cạnh trên, ở giữa
edge_tr– Khung viền, đuôi ở cạnh trên, cuối bên phải
edge_lt– Khung ở cạnh, đuôi ở cạnh trái, mép trên cùng
edge_lc– Khung viền, đuôi ở cạnh trái, ở giữa
edge_lb– Khung viền, đuôi ở cạnh trái, mép dưới
edge_rt– Khung viền, đuôi ở cạnh phải, đầu trên cùng
edge_rc– Khung viền, đuôi ở cạnh phải, ở giữa
edge_rb- Khung viền, đuôi ở cạnh phải, cuối
- <fill_color>
- Màu tô của bong bóng, dưới dạng màu thập lục phân HTML gồm 6 chữ số.
- <text_color>
- Màu văn bản, dưới dạng màu thập lục phân HTML gồm 6 chữ số.
- <text>
- Một dòng văn bản bong bóng cho bong bóng một dòng. Dấu cách phải là dấu +.
- <text_line_1>|...|<text_line_n>
- Một hoặc nhiều dòng văn bản, cho bong bóng văn bản nhiều dòng. Mỗi dòng được phân tách bằng một dấu |. Dòng đầu tiên sẽ hiển thị lớn hơn và in đậm. Phải thay thế dấu cách bằng dấu +.
Chỉ đổ bóng
Đối với cửa sổ chú giải, bạn cũng có thể vẽ bóng đứng riêng biệt bằng cú pháp nêu trong bảng trên. Ví dụ:
 chst= |
 chst= |
 chst= |
 chst= |
 chst= |
Ghim
Bạn có thể ghim nhiều biểu tượng và/hoặc chuỗi văn bản ngắn. Sau đây là các loại mã pin hiện có.
| Loại ghim | Bong bóng hằng số | Ví dụ |
|---|---|---|
| Ghim đơn giản có một chữ cái hoặc biểu tượng |
|
  |
| Ghim dấu sao/nghiêng có một chữ cái hoặc biểu tượng |
|
    |
| Ghim nhiều dòng, có thể mở rộng, xoay được | chst=d_map_spin |
 |
Mã PIN thuần tuý
có một chữ cái hoặc biểu tượng 
Đây là một ghim nhỏ, thẳng đứng có thể chứa một biểu tượng nhỏ hoặc một chữ cái.
Cú pháp chữ cái
chst=d_map_pin_letter[_withshadow] chld=<character>|<fill_color>|<text_color>
Cú pháp biểu tượng
chst=d_map_pin_icon[_withshadow] chld=<icon_string>|<fill_color>
- <character>
- [Chỉ ghim văn bản] Một ký tự văn bản đơn.
- <icon_string> (chuỗi biểu tượng)
- [Icon pins only] Một chuỗi chỉ định một trong các biểu tượng được mô tả ở cuối tài liệu này.
- <fill_color>
- Màu tô của bong bóng, dưới dạng màu thập lục phân HTML gồm 6 chữ số.
- <text_color>
- [Chỉ ghim văn bản] Màu văn bản, dưới dạng màu thập lục phân HTML gồm 6 chữ số.
Chỉ đổ bóng
Để chỉ vẽ bóng cho loại ghim này, hãy sử dụng cú pháp sau:
chst=d_map_pin_shadow
Tham số chld không bắt buộc chỉ đối với hiệu ứng đổ bóng.
Ví dụ
 chst=d_map_pin_letter_withshadow |
 chst=d_map_pin_letter |
 chst=d_map_pin_icon |
 chst=d_map_pin_shadow |
Mã ghim nghiêng/có gắn dấu sao có một
chữ cái hoặc biểu tượng 
Đây là một ghim nhỏ có thể nghiêng sang trái hoặc sang phải hoặc có các dấu sao chồng lên nhau. Nội dung của ghim có thể là một ký tự đơn hoặc một biểu tượng nhỏ.
Cú pháp chữ cái
chst=d_map_xpin_letter[_withshadow] chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>
Cú pháp biểu tượng
chst=d_map_xpin_icon[_withshadow] chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>
- <pin_style>
- Kiểu ghim. Chọn một trong các hằng số sau:
pin
pin_star
pin_sleft
pin_sright
- <icon_string> (chuỗi biểu tượng)
- [Biểu tượng ghim] Một chuỗi chỉ định một trong các biểu tượng được mô tả ở cuối tài liệu này.
- <character>
- [Ghim văn bản] Một ký tự văn bản đơn.
- <fill_color>
- Màu tô của bong bóng, dưới dạng màu thập lục phân HTML gồm 6 chữ số.
- <text_color>
- [Ghim văn bản] Màu văn bản, dưới dạng màu thập lục phân HTML gồm 6 chữ số.
- <star_fill_color>
- [Dấu sao] Màu tô của dấu sao, dưới dạng màu thập lục phân HTML gồm 6 chữ số.
Chỉ đổ bóng
Để chỉ vẽ bóng cho loại ghim này, hãy sử dụng cú pháp sau:
chst=d_map_xpin_shadow chld=<pin_style>
Ví dụ
 chst=d_map_xpin_letter |
 chst=d_map_xpin_letter |
 chst=d_map_xpin_icon |
 chst=d_map_xpin_shadow |
Ghim văn bản có điều chỉnh tỷ lệ và xoay 
Đây là ghim mà bạn có thể điều chỉnh tỷ lệ theo cách thủ công để bao gồm các chuỗi văn bản dài hơn. Bạn cũng có thể xoay ghim theo mức độ tùy chỉnh, cũng như điều chỉnh kích thước và màu sắc phông chữ.
Cú pháp
chst=d_map_spin chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>
- <scale_factor>
- Hệ số tỷ lệ để chỉ định kích thước ghim. Đây là số dấu phẩy động dương, trong đó 0,5 là kích thước của các chân không điều chỉnh theo tỷ lệ. 0,25 sẽ bằng một nửa kích thước đó, 1 sẽ gấp đôi kích thước đó, v.v.
- <rotation_deg>
- Độ xoay của ghim, tính bằng độ. Bạn có thể sử dụng giá trị dương và âm. Chỉ định 0 cho ghim dọc.
- <fill_color>
- Màu tô của bong bóng, dưới dạng màu thập lục phân HTML gồm 6 chữ số.
- <font_size>
- Cỡ chữ của văn bản, tính bằng pixel.
- <font_style>
- "_" (dấu gạch dưới) cho văn bản thường hoặc "b" cho văn bản in đậm.
- <text_line_1>...<text_line_n>
- Một hoặc nhiều dòng văn bản, được phân tách bằng | ký tự.
Ví dụ
 chst=d_map_spin |
 chst=d_map_spin |
 chst=d_map_spin |
Ghi chú phong cách vui nhộn
Bạn có thể tạo nhiều ghi chú dạng văn bản trong các mẫu mới lạ, chẳng hạn như ghi chú cố định hoặc bong bóng suy nghĩ. Bạn có thể tuỳ ý đưa một dòng tiêu đề vào ghi chú.
Những ghi chú này có kích thước cố định. Chúng sẽ không tăng hoặc thu nhỏ để phù hợp với kích thước văn bản.
Cú pháp
chst=d_fnote_title OR chst=d_fnote chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>
- đá
- Chỉ định
d_fnote_titlecho ghi chú có tiêu đề hoặcd_fnotecho ghi chú không có tiêu đề. Trong một ghi chú có tiêu đề, dòng văn bản đầu tiên sẽ được định dạng thành một tiêu đề (lớn hơn và in đậm). - <note_type>
- Một chuỗi mô tả hình dạng ghi chú. Chọn một trong các chuỗi loại ghi chú trong bảng bên dưới.
- <note_size>
- 1 (một) cho ghi chú lớn hoặc 2 cho ghi chú nhỏ. Kích thước mẫu là cố định; mẫu không tăng hoặc thu nhỏ để vừa với văn bản. Hãy thử nghiệm với cả hai kích thước để xem kích thước nào giữ văn bản của bạn tốt hơn.
- <text_color>
- Màu văn bản, ở dạng màu thập lục phân gồm 6 chữ số; giá trị alpha không được chấp nhận.
- <text_alignment> (căn chỉnh văn bản)
- Căn chỉnh cho tất cả văn bản, bao gồm cả tiêu đề. Chọn một trong những giá trị sau:
- l - ('L') Căn trái
- h – Căn giữa
- r – Căn phải
- <text_line_1>| ...|<text_line_n>
- Nội dung ghi chú. Sử dụng ký tự | để biểu thị một dòng mới. Khi
chst=d_fnote_title, dòng văn bản đầu tiên sẽ được định dạng làm tiêu đề.
Mẫu loại ghi chú
Các mẫu sau đây được hỗ trợ cho mẫu ghi chú. Chuỗi note_type cho mỗi chuỗi được hiển thị bên dưới mẫu.
Lưu ý: Chuỗi văn bản có phân biệt chữ hoa chữ thường!
 arrow_d |
 balloon |
 pinned_c |
 sticky_y |
 taped_y |
 thought |
Ví dụ
| Nội dung mô tả | Ví dụ: |
|---|---|
Ghi chú có tiêu đề: chst=d_fnote_title. Dòng văn bản đầu tiên được dùng làm tiêu đề. Kích thước là ghi chú lớn (1). |
 chst=d_fnote_title |
Lưu ý không có tiêu đề: chst=d_fnote.Văn bản được căn giữa. |
 chst=d_fnote |
Mẫu hữu ích cho một câu chuyện cười cũ. |
|
Ghi chú dự báo thời tiết
Bạn có thể tạo ghi chú bằng biểu tượng chỉ báo thời tiết. Bố cục tương tự như các ghi chú kiểu thú vị, nhưng màu văn bản luôn là màu đen, văn bản luôn được căn trái và bạn chỉ có thể có từ một đến ba dòng văn bản.
Các ghi chú này có kích thước cố định; chúng sẽ không tăng hoặc thu nhỏ để phù hợp với kích thước văn bản.
Cú pháp
chst=d_weather chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>
- đá
d_weatherbiểu thị ghi chú thời tiết.- <note_type>
- Mẫu dùng cho ghi chú này. Sử dụng một trong các chuỗi ghi chú được liệt kê trong danh sách ghi chú kiểu vui nhộn ở trên.
- <weather_icon>
- Một trong những chuỗi biểu tượng thời tiết trong bảng dưới đây. Ghi chú có thể chứa một biểu tượng thời tiết.
- <title>|<line_2>|<line_3>
- Tiêu đề, cộng với tối đa 2 dòng văn bản khác (không bắt buộc phải có các dòng văn bản này). Tiêu đề lớn hơn và in đậm.
Biểu tượng thời tiết
Sau đây là danh sách các biểu tượng thời tiết được hỗ trợ, cho thấy chuỗi weather_icon cho mỗi biểu tượng.
Lưu ý: Chuỗi văn bản có phân biệt chữ hoa chữ thường!
 clear-night-moon |
 cloudy-heavy |
 cloudy-sunny |
 cloudy |
 rain |
 rainy-sunny |
 snow |
 snowflake |
 snowy-sunny |
 sunny-cloudy |
 sunny |
 thermometer-cold |
 thermometer-hot |
 thunder |
 windy |
Ví dụ
| Nội dung mô tả | Ví dụ: |
|---|---|
Ghi chú thời tiết có tiêu đề và hai dòng trên mẫu kiểu taped_y. |
|
| Một ý tưởng tuyệt vời cho mùa đông. |
|
Khối văn bản phông chữ có đường viền (Chỉ văn bản)
Bạn có thể tạo một khối văn bản có đường viền trên nền trắng. Nếu bạn muốn có văn bản dấu + biểu tượng, hãy cân nhắc sử dụng loại một dòng đơn hỗ trợ biểu tượng.
Cú pháp
chst=d_text_outline chld=<text_fill_color>|<font_size>|<text_alignment>|<outline_color>|<font_weight>|<text_line_1>|...|<text_line_n>
- <text_fill_color>
- Màu nền văn bản. Đây là màu thập lục phân gồm 6 chữ số; giá trị alpha không được chấp nhận.
- <font_size>
- Một số chỉ định kích thước phông chữ, bằng pixel.
- <text_alignment> (căn chỉnh văn bản)
- Căn chỉnh cho tất cả văn bản, bao gồm cả tiêu đề. Chọn một trong những giá trị sau:
- l - ('L') Căn trái
- h – Căn giữa
- r – Căn phải
- <outline_color>
- Màu đường viền văn bản. Đây là màu thập lục phân gồm 6 chữ số; giá trị alpha không được chấp nhận.
- <font_weight>
- Văn bản thường hoặc in đậm. Dấu gạch dưới ' _' cho văn bản thường và 'b' cho văn bản in đậm.
- <text_line_1>| ...|<text_line_n>
- Nội dung ghi chú. Sử dụng ký tự | để biểu thị một dòng mới. Khi
chst=d_fnote_title, dòng văn bản đầu tiên sẽ được định dạng làm tiêu đề.
Ví dụ
 chst=d_text_outline |
 chst=d_text_outline |
Khối văn bản phông chữ có đường viền (Văn bản + Biểu tượng) 
Bạn có thể tạo một dòng văn bản có đường viền cùng với một biểu tượng ở trên cùng, bên trái, dưới cùng hoặc bên phải của khối. Nếu bạn không cần biểu tượng, hãy sử dụng khối văn bản phông chữ có đường viền.
Cú pháp
chst=<icon_position_string> chld=<text>|<font_size>|<font_fill_color>|<icon_name>|<icon_size>|<icon_fill_color>|<icon_and_text_border_color>
- <icon_position_string>
- Chỉ định vị trí biểu tượng xuất hiện trong hộp văn bản. Chọn một trong các giá trị sau:
d_simple_text_icon_below– Đặt biểu tượng ở cuối hộp:
d_simple_text_icon_above– Đặt biểu tượng lên đầu hộp:
d_simple_text_icon_left– Đặt biểu tượng vào bên trái hộp:
d_simple_text_icon_right– Đặt biểu tượng vào bên phải hộp:
- <text>
- Văn bản cần hiển thị. Chỉ một dòng; sử dụng dấu + cho dấu cách.
- <font_size>
- Một số chỉ định kích thước phông chữ, bằng pixel.
- <font_fill_color>
- Màu tô cho văn bản, dưới dạng một chuỗi gồm 6 chữ số. Giá trị alpha không được hỗ trợ.
- <icon_name>
- Một trong các tên biểu tượng được nêu ở cuối tài liệu này.
- <icon_size>
- Chiều cao của biểu tượng, tính bằng pixel. Những giá trị sau đây được hỗ trợ: 12, 16, 24.
- <icon_fill_color>
- Màu của biểu tượng, dưới dạng chuỗi gồm 6 chữ số. Giá trị alpha không được hỗ trợ.
- <icon_and_text_border_color>
- Màu của đường viền xung quanh biểu tượng và văn bản, dưới dạng một chuỗi gồm 6 chữ số. Giá trị alpha không được hỗ trợ.
Danh sách cờ và biểu tượng có sẵn
Bạn có thể sử dụng các hình ảnh sau trong các biểu tượng động bằng cách sử dụng tham số thích hợp.
Lưu ý: Các chuỗi văn bản có phân biệt chữ hoa chữ thường
Lưu ý: Biểu tượng chỉ có ở các kích thước sau: 12, 16, 24.
Biểu tượng cơ bản
Biểu tượng của Glyphish.com
Những biểu tượng này là của Joseph Wain / glyphish.com. Tác phẩm này được cấp phép theo Giấy phép Creative Commons ghi công 3.0 của Hoa Kỳ.
Cờ
Dưới đây là cờ cho một số quốc gia và vùng lãnh thổ.
Chuỗi văn bản
Tất cả văn bản hiển thị được gửi trong yêu cầu phải được mã hoá UTF-8 và sau đó được mã hoá URL.
Điều 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ả viết hoa và viết thường, cùng với một bộ dấu câu nhỏ). Ví dụ: Giá trị được mã hoá UTF-8 và URL được mã hoá cho chữ cái "è" là "%C3%A8" và đối với ký tự tiếng Trung 駅 là "%E9%A7%85". Hầu hết các trình duyệt sẽ cho phép bạn sử dụng giá trị chưa được mã hoá trong chuỗi URL (ví dụ: 駅) và sẽ mã hoá giá trị đó cho bạn phía sau hậu trường.
Tuy nhiên, có thể người xem URL hình ảnh của bạn đang sử dụng một trình duyệt không thực hiện việc này. Vì vậy, tốt nhất là bạn nên UTF-8 và mã hoá URL tất cả các ký tự không phải ASCII trong chuỗi văn bản. Xin lưu ý rằng điều này chỉ áp dụng cho văn bản xuất hiện trong bong bóng hoặc ghim, chứ không áp dụng cho ký tự &, | hoặc các ký tự khác thuộc cú pháp URL.
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ó biểu tượng đó!
Biểu tượng bị đổ 
Nhiều biểu tượng trong số này có thể được vẽ có hoặc không có bóng. Nếu tính năng đổ bóng là một tuỳ chọn, 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 một 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 tự do 
Một số loại biểu tượng cho phép bạn tự vẽ bóng của chúng. Bạn có thể muốn thực hiện việc này nếu đang sử dụng nhiều biểu tượng đổ bóng chồng lên nhau trên một đồ hoạ và các biểu tượng này ở gần đến mức bóng từ một đồ hoạ này rơi vào một đồ hoạ khác. 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.