重要事項：雖然我們積極維護互動式的動態 Google 圖表，但我們自 2012 年起正式淘汰靜態的 Google 圖片圖表。這項功能已於 2019 年 3 月 18 日停用。
本頁面說明如何建立各種摘要、對話框、圖釘和其他可使用網址建立的圖形。
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
簡介
您可以混合使用文字和圖片，製作各種有趣的摘要、圖釘或泡泡。這些項目稱為「動態圖示」。
語法
根網址： https://chart.googleapis.com/chart?
動態圖示在「?」之後支援下列參數：
| 參數 | 必填或選填 | 說明 |
|---|---|---|
chst=<icon_string_constant> |
必要 | 說明要建立的圖示類型。
|
chld=<icon_data> |
必要 | 用於描述圖示大小、旋轉角度、文字和其他必要資料的特定資料。
|
圖示類型
| 類型 | 示例 |
|---|---|
| 說明圖示：選擇小型或大型文字對話框，無論是否含有圖示。 |     |
| 圖釘 - 圖釘類型可以是純文字、加上星號或傾斜的，也可以包含圖示、單一字母或較長的文字字串。 |       |
| 趣味記事，內含文字和選用標題 |  |
| 天氣預報記事，內含標題、文字和天氣圖示 |  |
| 多行有外框的文字區塊，無圖示 |  |
| 含圖示的單行輪廓文字區塊 |   |
對話框
對話框有多種功能組合，包括大小不同 (大、小、包含或不包含圖示)、單行或多行文字。下表說明說明圖示的類型，以及各對話框的語法。表格下方會說明每個參數值的說明。
其他注意事項：
| 文字 | 圖示 | 語法 | 僅限陰影 | 範例 |
|---|---|---|---|---|
| 單行 | 否 | chst= |
chst= |
 chst=d_bubble_text_small |
| 單行 | Yes | chst= |
chst= |
 chst=d_bubble_icon_text_small |
| 單行 | Yes |
chst= |
chst= |
 chst=d_bubble_icon_text_big |
| 多行 | 否 | chst= |
chst= |
 chst=d_bubble_texts_big |
| 多行 | Yes |
|
chst= |
 chst=d_bubble_icon_texts_big |
語法
- <icon_string>
- 用於指定本文結尾處說明的任一圖示的字串。
- <frame_style>
- 末端的方向。選擇下列其中一個尾方向常數：
bb- 氣球框架，尾隨左下角
bbtl- 氣球框架，尾隨左上角
bbtr- 氣球框，右側是右上角
bbbr- 氣球頁框，右下方
bbT- 氣球框，無尾部
edge_bl- 邊緣邊框，下方邊緣，左端
edge_bc- 邊緣外框，下方邊緣，置中
edge_br- 邊緣邊框，底部邊緣，右端
edge_tl- 邊緣邊框，頂端邊緣，左端
edge_tc- 邊緣外框，下方邊緣，置中
edge_tr- 邊緣邊框，頂端邊緣，右端
edge_lt- 邊緣邊框，左側邊緣，頂端
edge_lc- 邊緣邊框，左側邊緣，置中
edge_lb- 邊緣邊框，左側邊緣，底部
edge_rt- 邊緣頁框，右側邊緣，頂部
edge_rc- 邊緣邊框，右側邊緣，置中
edge_rb- 邊緣頁框，右側邊緣，底部
- <fill_color>
- 泡泡填滿顏色，以六位數 HTML 十六進位顏色表示。
- <text_color>
- 文字顏色，以六位數 HTML 十六進位顏色表示。
- <text>
- 一行對話框文字。空格必須加上 + 符號。
- <text_line_1>|...|<text_line_n>
- 一或多行文字，用於多行文字對話框。每行會以 | 標記分隔。第一行會以粗體顯示。 空格則必須以 + 取代。
僅限陰影
以對話框來說，您也可以使用上表顯示的語法來繪製獨立陰影。例：
 chst= |
 chst= |
 chst= |
 chst= |
 chst= |
圖釘
你可以使用圖示和/或簡短文字字串製作各種圖釘。以下是可用的 PIN 碼類型。
| PIN 碼類型 | 泡泡常數 | 示例 |
|---|---|---|
| 帶有一個字母或圖示的純圖釘 |
|
  |
| 帶有單一字母或圖示的傾斜/星號圖釘 |
|
    |
| 可擴充、可旋轉、多行針腳 | chst=d_map_spin |
 |
含有單一字母或圖示的純圖釘 
這是直立的小型 PIN 碼，包含小型圖示或一個字母。
字母語法
chst=d_map_pin_letter[_withshadow] chld=<character>|<fill_color>|<text_color>
圖示語法
chst=d_map_pin_icon[_withshadow] chld=<icon_string>|<fill_color>
- <字元>
- [僅限文字圖釘] 單一文字字元。
- <icon_string>
- [僅限圖示固定] 用於指定本文結尾說明的其中一個圖示字串。
- <fill_color>
- 泡泡填滿顏色，以六位數 HTML 十六進位顏色表示。
- <text_color>
- [僅限文字釘選] 文字顏色，以六位數 HTML 十六進制顏色表示。
僅限陰影
如果只要為這個圖釘類型繪製陰影，請使用以下語法：
chst=d_map_pin_shadow
只有陰影需要 chld 參數。
例子
 chst=d_map_pin_letter_withshadow |
 chst=d_map_pin_letter |
 chst=d_map_pin_icon |
 chst=d_map_pin_shadow |
以單一字母或圖示呈現傾斜/已加星號的圖釘 
這是小型的圖釘，可以向左或向右傾斜，也可以有星號重疊。 圖釘的內容可以是單一字元或小圖示。
字母語法
chst=d_map_xpin_letter[_withshadow] chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>
圖示語法
chst=d_map_xpin_icon[_withshadow] chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>
- <pin_style>
- 圖釘樣式。選擇下列其中一個常數：
pin
pin_star
pin_sleft
pin_sright
- <icon_string>
- [圖示圖釘] 指定本文結尾說明的其中一個圖示字串。
- <字元>
- [文字圖釘] 單一文字字元。
- <fill_color>
- 泡泡填滿顏色，以六位數 HTML 十六進位顏色表示。
- <text_color>
- [文字圖釘] 文字顏色，以六位數 HTML 十六進制顏色表示。
- <star_fill_color>
- [星號圖釘] 星號的填滿顏色，以六位數 HTML 十六進位顏色表示。
僅限陰影
如果只要為這個圖釘類型繪製陰影，請使用以下語法：
chst=d_map_xpin_shadow chld=<pin_style>
例子
 chst=d_map_xpin_letter |
 chst=d_map_xpin_letter |
 chst=d_map_xpin_icon |
 chst=d_map_xpin_shadow |
使用縮放和旋轉功能的文字圖釘
這個圖釘可以手動調整，加入較長的文字字串。 也可以旋轉圖釘自訂的程度，並控製字型大小和顏色。
語法
chst=d_map_spin chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>
- <scale_factor>
- 用於指定圖釘大小的縮放比例係數。這是正浮點數，其中 0.5 代表未縮放圖釘的大小。0.25 就是這個大小的一半，1 則是該大小的兩倍，以此類推。
- <rotation_deg>
- 針腳的旋轉角度 (以度為單位)。但允許為正值和負值。 將垂直圖釘指定為 0。
- <fill_color>
- 泡泡填滿顏色，以六位數 HTML 十六進位顏色表示。
- <font_size>
- 文字的字型大小，以像素為單位。
- <font_style>
- 一般文字可以是「_」(底線)，「b」代表粗體文字。
- <text_line_1>...<text_line_n>
- 一或多行文字，以 | 字元分隔。
例子
 chst=d_map_spin |
 chst=d_map_spin |
 chst=d_map_spin |
趣味風格記事
您可以使用新奇範本建立各種文字筆記，例如便利貼或想法泡泡。您可以視需要在記事中加入標題行。
這些附註的大小固定，不會配合文字大小而放大或縮小。
語法
chst=d_fnote_title OR chst=d_fnote chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>
- chst
- 在含有標題的記事中指定
d_fnote_title，或為不含標題的記事指定d_fnote。在含有標題的記事中，第一行文字會轉換為標題 (較大和粗體)。 - <note_type>
- 說明記事形狀的字串。請在下表中選擇其中一個記事類型字串。
- <note_size>
- 1 (一個) 用於大型記事，2 則用於小型記事。範本大小固定，範本不會配合文字放大或縮小。試用這兩種大小，找出最能顯示文字的說明文字。
- <text_color>
- 文字顏色，以六位數十六進制顏色表示，不接受 Alpha 值。
- <text_alignment>
- 包括標題在內的所有文字對齊方式。選擇下列其中一個值：
- l - (「L」) 靠左對齊
- h - 置中對齊
- r - 靠右對齊
- <text_line_1>| ...|<text_line_n>
- 記事文字。使用 | 字元表示換行。如果設為
chst=d_fnote_title，第一行文字會格式化為標題。
附註類型範本
附註範本支援下列範本。範本下方會顯示每個要求的 note_type 字串。
注意：文字字串有大小寫之分！
 arrow_d |
 balloon |
 pinned_c |
 sticky_y |
 taped_y |
 thought |
例子
| 說明 | 範例 |
|---|---|
記事標題：chst=d_fnote_title。第一行文字會做為標題，大小是一個大型附註 (1)。 |
 chst=d_fnote_title |
沒有標題的記事：chst=d_fnote.文字置中。 |
 chst=d_fnote |
適用於舊笑話的實用範本。 |
|
天氣預報資訊
您可以建立附有天氣指標圖示的記事。與趣味風格記事類似的版面配置，但文字顏色一律為黑色，文字會一律靠左對齊，且只能有一到三行文字。
這些附註的大小固定，不會為了配合文字大小而放大或縮小。
語法
chst=d_weather chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>
- chst
d_weather表示天氣附註。- <note_type>
- 要用於這則記事的範本。請使用上方趣味風格記事清單中列出的其中一個附註字串。
- <weather_icon>
- 下表其中一個天氣圖示字串。一個記事可加入一個天氣圖示。
- <title>|<line_2>|<line_3>
- 標題以及最多兩行文字 (這些額外文字行為選填)。 標題較大，且較搶眼。
天氣圖示
以下是支援的天氣圖示清單，顯示每個圖示的 weather_icon 字串。
注意：文字字串有大小寫之分！
 clear-night-moon |
 cloudy-heavy |
 cloudy-sunny |
 cloudy |
 rain |
 rainy-sunny |
 snow |
 snowflake |
 snowy-sunny |
 sunny-cloudy |
 sunny |
 thermometer-cold |
 thermometer-hot |
 thunder |
 windy |
例子
| 說明 | 範例 |
|---|---|
天氣附註，內含標題，且在 taped_y 樣式範本上顯示兩行。 |
|
| 一個冬天的祝福。 |
|
外框文字區塊 (僅限文字)
您可以建立內含白色背景的外框文字區塊。如需文字 + 圖示，請考慮使用支援圖示的單行多樣性。
語法
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>
- 文字填滿顏色。這是六位數的十六進位顏色，不接受 Alpha 值。
- <font_size>
- 用來指定字型大小的數字 (以像素為單位)。
- <text_alignment>
- 包括標題在內的所有文字對齊方式。選擇下列其中一個值：
- l - (「L」) 靠左對齊
- h - 置中對齊
- r - 靠右對齊
- <outline_color>
- 文字外框顏色。這是六位數的十六進位顏色，不接受 Alpha 值。
- <font_weight>
- 一般或粗體文字。底線「_」代表一般文字，「b」代表粗體文字。
- <text_line_1>| ...|<text_line_n>
- 記事文字。使用 | 字元表示換行。如果設為
chst=d_fnote_title，第一行文字會格式化為標題。
例子
 chst=d_text_outline |
 chst=d_text_outline |
外框文字區塊 (文字 + 圖示)
您可以建立一行外框文字，以及區塊頂端、左側、底部或右側的圖示。如果您不需要圖示，請使用有外框的字型文字區塊。
語法
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>
- 指定圖示在文字方塊中顯示的位置。選擇下列其中一個值：
d_simple_text_icon_below- 將圖示放在方塊底部：
d_simple_text_icon_above- 將圖示放在方塊頂端：
d_simple_text_icon_left- 將圖示放在方塊左側：
d_simple_text_icon_right- 將圖示放在方塊右側：
- <text>
- 要顯示的文字。只能使用一行；如要保留空格，請使用 +。
- <font_size>
- 用來指定字型大小的數字 (以像素為單位)。
- <font_fill_color>
- 文字的填滿顏色，以六位數字串表示。不支援 Alpha 值。
- <icon_name>
- 本文件底部列出的其中一個圖示名稱。
- <icon_size>
- 圖示的高度，以像素為單位。支援的值如下：12、16、24。
- <icon_fill_coloricon_fill_color>)
- 圖示的顏色，以六位數字串表示。不支援 Alpha 值。
- <icon_and_text_border_color>
- 圖示和文字的邊框顏色，以六位數字串表示。不支援 Alpha 值。
可用旗標和圖示清單
透過適當的參數，您可以在動態圖示中使用下列圖片。
注意：文字字串有大小寫之分
注意：圖示僅支援以下大小：12、16、24。
基本圖示
Glyphish.com 的圖示
這些圖示是由 Joseph Wain / glyphish.com 提供。這項內容採用的是創用 CC 姓名標示 3.0 美國授權。
標記
以下是部分國家/地區的旗幟。
文字字串
請求中傳送的所有顯示文字都必須是 UTF-8 編碼，再進行網址編碼。
這只會影響非網址安全的字元 (安全網址字元大多為英文字母 a-z，大小寫英文字母，外加一小組標點符號)。例如，字母「è」的 UTF-8 和網址編碼值是「%C3%A8」，中文字元 id 的值為「%E9%A7%85」。多數瀏覽器都可讓您在網址字串中使用未編碼的值 (例如 攤日)，並在幕後進行編碼。
然而，其他使用者瀏覽您的圖片網址時並未執行上述作業，因此通常最好採用 UTF-8 編碼，並且將文字字串中的所有非 ASCII 字元進行網址編碼。請注意，僅適用於對話框或圖釘中顯示的文字，不適用於網址語法中的 &、| 或其他字元。
陰影
您可以為許多圖示加上陰影，甚至可為某些沒有圖示的圖示繪製陰影！
陰影圖示 
其中許多圖示可以繪製，也可以使用陰影。如果選擇陰影，圖示名稱會有結尾為 _withshadow 的版本，以及另一個不含該結尾的版本。您可以根據是否想要使用陰影，以兩種結尾來指定圖示。
以下是中型文字泡泡和包含及沒有陰影的圖釘範例：
 chst=d_bubble_icon_text_big |
 chst=d_bubble_icon_text_big_withshadow |
 chst=d_map_pin_icon |
 chst=d_map_pin_icon_withshadow |
獨立式陰影 
有些圖示類型可讓您單獨繪製陰影。如果圖像中有多個重疊的陰影圖示，且這些圖示與圖像中的陰影靠得太近，導致陰影掉落在其他圖像上，建議您這麼做。請參閱特定圖示類型的說明文件，瞭解您能否單獨繪製陰影。