動態圖示

   

「動態圖示」參考資料圖表說明所有可用的動態標記類型。

本頁說明如何建立各種可透過網址要求的所有摘要、對話框、圖釘和其他圖形，或是以標記的形式加入其他圖表。

目錄

1. 簡介
   1. 獨立圖示
   2. 動態標記
2. 常見圖示功能
   1. 文字字串
   2. 陰影
3. 內容相關圖示

簡介

您可以利用 Chart API 建立各種有趣的摘要、圖釘或對話框，並混合文字和圖片。這些項目稱為動態圖示。 您可以建立獨立式的動態圖示圖片，也可以使用 chem 參數將動態圖示置於圖表上方做為標記類型。本頁說明如何以獨立圖片或其他圖表上的標記建立動態圖示。「動態圖示」參考資料圖表說明所有可用的動態標記類型。

建立動態圖示的語法取決於您使用獨立圖示，還是其他圖表中的動態標記。

獨立圖示

您可以要求動態圖示圖片，方法與要求任何其他圖表相同。獨立式動態圖示支援的參數組合與其他圖表不同：

參數	必填或選填	說明
chst=<icon_string_constant>	必要	說明要建立的圖示類型。 icon_string_constant - 用來說明要建立圖示類型的字串常數。請參閱下方的圖示選取一節來選擇圖示。
chld=<icon_data>	必要	用於描述圖示大小、旋轉、文字和其他必要資料的特定資料。 icon_data - 適用於圖示的一組以直立線分隔值。本頁的說明文件將說明每種圖示類型所需的值。
cht	未使用	獨立式動態圖示圖表不使用 cht 參數。
chs	未使用	獨立式動態圖示圖表不使用 chs 參數。
chd	未使用	使用 chld 參數將資料傳遞至獨立式動態圖示。

範例

https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000

動態標記

您可以使用 chem 參數，在幾種不同類型的圖表中嵌入動態圖示做為標記類型。詳情請參閱 chem 說明文件。

範例

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

常見圖示功能

大部分圖示都具有相關聯的文字字串或陰影。

文字字串

傳送至 Chart API 的所有顯示文字都必須採用 UTF-8 編碼，再進行網址編碼。 這個問題只會影響非網址安全字元 (安全網址字元大多是由大小寫英文字母 a-z 組成，以及小寫的標點符號和一小部分的標點符號)。舉例來說，字母「è」的 UTF-8 和網址編碼值是「%C3%A8」，中文字元則為「%E9%A7%85」。多數瀏覽器都允許使用「%E9%A7%85」這類未編碼的值，在網址字串中使用未經編碼的值，並在背景為您編碼。不過，如果使用者查看圖表網址時並未使用瀏覽器，請注意，這僅適用於顯示在對話框或圖釘中的文字，不適用於 &、| 或其他屬於網址語法的字元。

使用 chem 參數指定動態圖示標記時，您也必須按照 chem 說明文件所述，在文字中逸出特定字元。

陰影

您可以為多個圖示加上陰影，甚至為部分沒有圖示本身的圖示繪製陰影！

覆蓋的圖示

其中許多圖示都可以加上陰影或沒有陰影。如果選項包含陰影，圖示名稱的結尾會是 _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

獨立陰影

部分圖示類型可讓您單獨繪製陰影。如果您在圖像上使用多個重疊的陰影圖示，且這些圖示相近，且某圖示的陰影落在另一個圖示之間，建議您這麼做。舉例來說，以下是兩個有陰影的泡泡，Robert 先繪製，再繪製小愛：

請注意小艾的陰影部分覆蓋了小羅的部分。如要修正這個問題，請先繪製愛麗絲陰影，然後畫出小羅畫泡泡，接著繪製沒有陰影的 Alice。或許在光線和陰影方面不太真實，但會避免讓一個泡泡遮蓋另一個陰影：

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

所有標記都會指定相同的 Z 順序 (py=1)，因此會按照圖表元素 (圖表線條) 上方列出的順序繪製。首先，她繪製了愛麗絲陰影，然後是 Robert 泡泡，其上最後是 Alice 泡泡。

如要瞭解是否只能單獨繪製陰影，請參閱特定圖示類型的說明文件。

內容比對圖示

您可以指定圖示，依照其指派的位置來調整顏色、大小或堆疊。這些圖示類型僅能以動態圖示標記 (chem 參數) 的形式使用，無法做為獨立圖示。

這些圖示可以顯示在指定顏色、大小或堆疊資訊系列以外的系列上。這表示 chem 參數的 ds 值會指定要算繪圖示的系列，但用於決定圖示大小或顏色的值會在下方的參數中指定。這種做法的其中一個優點是，使用隱藏資料序列處理圖示資料，但改為在可見的線條或長條上顯示圖示。例子如下：

來源序列上顯示的圖示	非來源系列上顯示的圖示	使用隱藏系列的圖示
chem=   y;s=cm_size;ds=0;...;   d=maps_pin,0,10,50,10,8F8,000,hb ds=0 - 在序列 0 (紅線) 上顯示 d=maps_pin,0,... - 序列 0 的資料	chem=   y;s=cm_size;ds=1;...;   d=maps_pin,0,10,50,10,8F8,000,hb ds=1 - 以第 1 列顯示 (藍線) d=maps_pin,0,... - 來自第 0 序列的資料	chd=t1:   10,20,30,5,10,60   10,20,30,70,60,5 chem=   y;s=cm_size;ds=0;dp=all;   d=disk,1,5,20,5,FFFF10,000 t1: - 顯示第一個序列，並使用第 1 行折線資料。 已隱藏所有之後的系列。 ds=0 - 在序列 0 上顯示的標記。 d=disk,1,... - 磁碟資料來自隱藏的序列 1。

結構定義標記類型

標記類型	chem 秒的值	範例
顏色變化	s=cm_color
尺寸變化	s=cm_size
顏色和尺寸變化	s=cm_color_size
堆疊變化版本	s=cm_repeat
堆疊和顏色變化	s=cm_repeat_color

內容相關圖示的對齊字串

內容圖示支援選用的對齊字串，可用於指定圖示與資料點的對齊和偏移。此字串的語法如下：

<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]

alignment

兩個字母，用來說明圖示與點的對齊方式。範例包括 tl (左上方) 和 rb (右下方)。如需完整的清單和說明，請參閱 chem 參數的 alignment_string 參數說明。

h_anchor_offset

[選用] 錨點的水平偏移，以像素為單位。包含零 的值前面必須加上 + 或 -。重要事項：網址編碼 + 必須為 %2B。

v_anchor_offset

[選用] 錨點的垂直偏移，以像素為單位。包含零的值前面必須加上 + 或 -。重要事項：網址編碼 + 必須為 %2B。

請注意，您也可以使用 chem 參數的 of 元件指定水平和垂直偏移。如果您同時指定 of 元件和 h_anchor_offset v_anchor_offset 值，所有偏移值都會套用至圖示。

範例：

hb-0-0 水平置中下方 無偏移	lb-0-0 左下方 無偏移	rb-0-0 右下方 無偏移	ht-0-0 水平頂端 無偏移
hb-20-0 水平置中底部 - 20 個水平方向 0 個垂直方向	hb%2b20-0 水平置中下方 +20 個水平方向 0 個垂直方向	hb-0%2b10 水平置中底部 0 水平置中 +10 個垂直方向	hb-0-20 水平置中下方 0 水平置中 -20 個垂直方向

顏色變化 (cm_color)

您可以根據其代表的點，改變關聯圖表標記的顏色。您必須指定色彩範圍，系統就會將資料值縮放為該範圍內的對應顏色。

語法

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>

要使用的圖示。指定 ID 字串，用於識別頁面底部所列的圖片。

<color_data_series>

用於改變圖示顏色的資料序列從零開始的索引。

<low_color>

範圍中的低色值，以三或六位數 HTML 十六進位顏色代碼 (沒有 # 符號) 表示。這與可用資料範圍中的可能值相關。

<middle_color>

範圍中的中間顏色值，以三或六位數 HTML 十六進位顏色代碼 (無 # 符號) 表示。這與可用資料範圍的中間值相關聯。

<high_color>

範圍中的高色彩值，以三或六位數 HTML 十六進位顏色代碼 (沒有 # 符號) 表示。與可用資料範圍中的可能值相關。

<icon_size>

圖示的大小，以像素為單位。可能出現的值如下：12、16、24。

<outline_color>

圖示的外框顏色，以三或六位數 HTML 十六進位顏色代碼表示 (無 # 符號)。

<alignment>

用於說明圖示對齊和偏移的選用字串。

範例

s=cm_color - 顏色變化圖示 ds=0 - 在資料序列 0 中轉譯 dp=all - 在所有點上放置圖示。 d 值： petrol - 圖示 ID 0 - 資料序列 0 的顏色 000,0FF,F55 - 色階的定義 24 - 圖示大小 000 - 黑色輪廓 hv - 將圖示置中對齊 (水平和垂直)。

chem=y;s=cm_color;   ds=0;   dp=all;   d=petrol,0,000,0FF,F55,24,000,hv

返回頁首

 

 

---

大小變化 (cm_size)

您可以根據您選擇的資料序列，單獨使用內容比對圖表標記的大小。

語法

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>

圖示的形狀。請選擇下列其中一個值：maps_pin、disk 或 square。

<size_data_series>

用於改變圖示大小的資料序列從零開始索引。

<zero_value_size>

圖示的基本大小，為序列的最小值。

<size_multiplier>

大小縮放係數。這個值會乘以每個圖示資料值和最小序列值之間的差額，藉此計算最終圖示大小。因此，包含資料值的圖示不會受到此調節係數影響。

<min_size>

任何圖示的最小尺寸，以像素為單位。

<outline_color>

圖示的外框顏色，以三或六位數 HTML 十六進位顏色代碼表示 (無 # 符號)。

<填入顏色fill_color>

圖示的填滿顏色，以三或六位數 HTML 十六進位顏色代碼表示 (沒有 # 符號)。

<alignment>

用於說明圖示對齊和偏移的選用字串。

例子

基本範例。值為 0 的圖示會以 0 值的大小 (30 像素) 呈現。大小會隨著資料一起增加。	chd=t:0,10,20,30,40,50,60,70 chem=y;s=cm_size;ds=0;dp=all;py=-1;d=maps_pin,0,30,100,10,8F8,000,hb
在這個範例中，圖示從黃色線條取得大小資料，但顯示在藍線中。 chem=y - 動態標記 s=cm_size - 大小變異數 ds=1 - 根據資料序列 1 (藍線) 轉譯 dp=all - 在所有點顯示。 d= maps_pin - 使用地圖圖釘圖示 0：根據資料序列 0 (黃色線) 縮放大小 10 - 在值 0 中固定大小 90 - 尺寸調節係數 10 - 大小下限 8F8 - 填滿顏色 000 - 外框顏色 hb - 將小工具水平置中於圖釘底部。	chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb

返回頁首

 

 

---

顏色和大小變化 (cm_color_size)

您可以根據您選擇的資料序列，變更關聯圖表標記的顏色和大小。

語法

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>

圖示的形狀。請選擇下列其中一個值：maps_pin、disk 或 square。

<color_data_series>

用於改變圖示顏色的資料序列從零開始的索引。

<low_color>

範圍中的低色值，以三或六位數 HTML 十六進位顏色代碼 (沒有 # 符號) 表示。這與可用資料範圍中的可能值相關。

<middle_color>

範圍中的中間顏色值，以三或六位數 HTML 十六進位顏色代碼 (無 # 符號) 表示。這與可用資料範圍的中間值相關聯。

<high_color>

範圍中的高色彩值，以三或六位數 HTML 十六進位顏色代碼 (沒有 # 符號) 表示。與可用資料範圍中的可能值相關。

<size_data_series>

用於改變圖示大小的資料序列從零開始索引。

<zero_value_size>

圖示的基本大小，為序列的最小值。

<size_multiplier>

大小縮放係數。這個值會乘以每個圖示資料值和最小序列值之間的差額，藉此計算最終圖示大小。因此，包含資料值的圖示不會受到此調節係數影響。

<min_size>

任何圖示的最小尺寸，以像素為單位。

<outline_color>

圖示的外框顏色，以三或六位數 HTML 十六進位顏色代碼表示 (無 # 符號)。

<alignment>

用於說明圖示對齊和偏移的選用字串。

例子

此範例使用兩行。圖釘使用算繪時所在的系列顏色資料，但使用來自其他序列的大小資料。 chd=s:0akAZtnkmi,nbMPJOKXXS - 第一個系列用於標示黃色線條並決定圖釘顏色。第二個系列用於藍線和圖釘大小。 chem=y - 轉譯動態圖示 s=cm_color_size - 使用顏色和大小變化版本內容圖示。 ds=1 - 在資料序列 1 (藍線) 上顯示項目。 dp=all - 在所有點上放置圖示。 d= maps_pin - 使用地圖圖釘符號。 1 - 使用資料序列 1 做為圖釘顏色。 000,0FF,F55 - 低、中、高色彩。 0 - 使用資料序列 0 做為圖釘大小。 10：固定位置為 10 像素，值為 0。 90 - 大小倍增為 90。 10：圖釘大小至少為 10 像素。 000 - 黑色外框顏色。 hb - 將圖釘沿著底部邊緣水平置中為每個資料點置中。

chd=s:0akAZtnkmi,nbMPJOKXXS chem=y;s=cm_color_size;ds=1;dp=all;d=maps_pin,1,000,0FF,F55,0,10,90,10,000,hb

返回頁首

 

 

---

堆疊變化版本 (cm_repeat)

您可以根據特定時間點的資料值，變更堆疊圖示的高度。

語法

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>

要使用的圖示。指定 ID 字串，用於識別頁面底部所列的圖片。

<repeat_series_index>

以零為基準的資料序列索引，用於計算目前要放置的圖示數量。

<scaling_factor>

系統會將來源資料序列值比例調整為 0 到 1 之間的值，再乘以這個值，藉此判斷這個點要放置多少標記。部分值遭到截斷。

<stacking_direction>

堆疊方向：「h」(小寫) 代表水平，「V」(大寫) 代表垂直。

<icon_size>

每個標記的大小，以像素為單位。可能出現的值如下：12、16、24。

<填入顏色fill_color>

圖示的填滿顏色，以三或六位數 HTML 十六進位顏色代碼表示 (沒有 # 符號)。

<outline_color>

圖示的外框顏色，以三或六位數 HTML 十六進位顏色代碼表示 (無 # 符號)。

<spacing>

堆疊中每個標記之間要放置多少空間，以像素為單位。

<alignment>

用於說明圖示對齊和偏移的選用字串。

範例

這個範例使用第二個虛擬資料序列。這不會顯示在圖表中，但會做為所有堆疊均平均間隔的方式 (從圖表底部開始顯示)。 chd=s1:0akAZtnkmi,AAAAAAAAAA - 第一個系列用於繪製線條並決定堆疊高度。第二個則用於指定每個圖示堆疊的基礎，也就是 0 值。 chem=y - 轉譯動態圖示 s=cm_repeat - 使用堆疊變化形式內容圖示。 ds=1 - 呈現資料序列中的項目 1。 dp=all - 在所有點上放置圖示。 d= d=petrol - 使用加油站符號。 0 - 使用重複次數的資料序列 0。 9 - 使用 6 縮放比例係數。 V - 垂直堆疊。 16 - 將每個標記的高度設為 16 像素。 F00 - 圖示填滿顏色。 000：圖示外框顏色。 2 - 堆疊中每個圖示之間的 2 個像素。 hb - 將堆疊置於底部置中

chd=s1:0akAZtnkmi,AAAAAAAAAA chem=   y;s=cm_repeat;ds=1;dp=all;   d=petrol,0,9,V,16,F00,000,2,hb

返回頁首

 




---

 

堆疊和色彩變化 (cm_repeat_color)

您可以根據特定點的資料值，改變圖示堆疊的高度和顏色。

語法

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>

要使用的圖示。指定 ID 字串，用於識別頁面底部所列的圖片。

<repeat_series_index>

以零為基準的資料序列索引，用於計算目前要放置的圖示數量。

<scaling_factor>

系統會將來源資料序列值比例調整為 0 到 1 之間的值，再乘以這個值，藉此判斷這個點要放置多少標記。部分值遭到截斷。

<stacking_direction>

堆疊方向：「h」(小寫) 代表水平，「V」(大寫) 代表垂直。

<icon_size>

每個標記的大小，以像素為單位。可能出現的值如下：12、16、24。

<color_data_series>

用於改變圖示顏色的資料序列從零開始的索引。

<low_color>

範圍中的低色值，以三或六位數 HTML 十六進位顏色代碼 (沒有 # 符號) 表示。這與可用資料範圍中的可能值相關。

<middle_color>

範圍中的中間顏色值，以三或六位數 HTML 十六進位顏色代碼 (無 # 符號) 表示。這與可用資料範圍的中間值相關聯。

<high_color>

範圍中的高色彩值，以三或六位數 HTML 十六進位顏色代碼 (沒有 # 符號) 表示。與可用資料範圍中的可能值相關。

<outline_color>

圖示的外框顏色，以三或六位數 HTML 十六進位顏色代碼表示 (無 # 符號)。

<spacing>

堆疊中每個標記之間要放置多少空間，以像素為單位。

<alignment>

用於說明圖示對齊和偏移的選用字串。

範例

chem=y - 轉譯動態圖示 s=cm_repeat_color - 使用堆疊和顏色變化內容圖示。 ds=0 - 呈現資料序列 0 中的項目。 dp=all - 在所有點上放置圖示。 d= petrol - 使用加油站符號。 0 - 使用重複次數的資料序列 0。 6 - 使用 6 縮放比例係數。 V - 垂直堆疊。 12 - 將每個標記的高度設為 12 像素。 0：使用序列 0 來指定顏色。 F00,0F0,00F - 低、中和高的顏色值。 000：圖示外框顏色。 2 - 堆疊中每個圖示之間的 2 個像素。 hv - 將堆疊置於每個資料點的垂直和水平置中中心。

chem=   y;s=cm_repeat_color;ds=0;dp=all;   d=petrol,0,6,V,12,0,F00,0F0,00F,000,2,hv

返回頁首