圖表圖例

1.1 版本

1.2 功能簡介

「圖例」顯示的內容實際是由 圖表系列>顏色 決定的，共有以下三種類型：

1）普通圖例：可點選圖例實現該系列的顯示與隱藏。

2）連續漸變圖例：可滑動上下圓點改變值的範圍，圖形對應的值在範圍內時顯示，在範圍外時隱藏。

3）區域段圖例：可點選區域段實現該區域段對應的圖形的顯示與隱藏。

注1：只有「地圖、鑽取地圖、熱力地圖、氣泡圖、散點圖、詞雲圖」這 6 種圖表的系列選擇為「顏色劃分>值」時可設定後兩種圖例，其他情況均為普通圖例。

注2：框架圖和儀表盤不支援設定圖例。

注3：圖表圖例過多時，在行動端可能會出現顯示不全的情況，點選圖例空白處可以出現捲軸，拖動即可查看剩餘圖例。

圖例共有 5 個通用屬性，分別是：佈局、樣式、邊框、背景、顯示策略。當圖表為「地圖、鑽取地圖、熱力地圖、氣泡圖、散點圖、詞雲圖」且設定 圖表系列顏色劃分 為「值」時，圖例會顯示「格式」屬性。下面為大家分別介紹。

2.1 佈局

圖例顯示位置設定，共有六個設定選項，分別是：靠上，靠下，靠左，靠右，右上、自訂懸浮位置，預設為靠右顯示。

1）靠上，靠下

位置選擇「靠上、靠下」時，會顯示「排列」選項：流式、對齊，預設為對齊。

當圖表的圖例較多時，流式佈局和對齊佈局的效果分別如下所示：

2）靠左、靠右、右上

位置選擇「靠左、靠右、右上」時，無排列選項。如下圖所示：

3）自訂懸浮位置

透過輸入 x 方向和 y 方向的值來控制圖例的位置。

詳細介紹和範例參見文檔：自訂圖表標題和圖例的位置 。

2.2 樣式

用於設定圖例標籤文字的字體、顏色、字號，預設跟隨主題，可根據具體需求自訂。

注：如果瀏覽器設定了最小字體，而範本圖表中設定的最小字體小於瀏覽器的最小字體，那麼以瀏覽器為準。

比如說 Chrome 瀏覽器的最小字體為 12 號，圖表設定的字體大小為 10 號，在 Chrome 下查看報表時，圖表字體顯示為 12 號，而非 10 號，故此時需要修改瀏覽器字體大小。

2.3 邊框

可設定整個圖例部分的邊框，預設為無邊框。設定項如下：

• 線型：圖例邊框採用哪種線型，預設為無。

• 顏色：圖例邊框所使用的顏色。

• 圓角：圖例邊框四個角的圓角度數設定，預設為 0 px。

2.4 背景

可設定整個圖例部分的背景，預設沒有背景。設定項如下：

• 填充：可下拉選擇沒有背景、顏色、漸變色，預設為沒有背景。

• 不透明度：設定背景的透明效果，預設不透明度為 100% 。

• 陰影：設定圖表背景是否開啟陰影效果，預設為關閉。

2.5.1 互動特效

1）未開啟固定顯示

初次點選圖例文字或圖示，該圖例隱藏，再次點選後顯示。效果如下圖所示：

2）開啟固定顯示

• 當圖例顯示時，將滑鼠懸浮在圖例上時，圖例圖示變為「固釘」樣式 （顏色跟隨系列色），且當滑鼠懸浮在圖例圖示上時，該圖例高亮，高亮的圖例對應的系列不透明度為 100%，其餘系列不透明度為 30%。

• 圖例顯示時，點選圖例文字，該圖例隱藏，隱藏後點選圖例文字或圖示則再次顯示；

• 圖例顯示時，點選 後圖示變為 ，此時只顯示該圖例，其他圖例隱藏；點選被隱藏的圖例，可再次顯示。當只有一個系列顯示時，點選 後，所有系列顯示。

2.5 顯示策略

可設定圖例在整個圖表的所佔的區域大小，以及圖例在預覽時的互動效果。

1）區域大小：可對圖例顯示區域的大小進行控制，可選擇「自動」和「自訂」，預設為「自動」即不限制大小。

注：圖例的佈局設定為自訂懸浮位置時，區域大小灰化不可設定。

2）固定顯示：開啟與不開啟固定顯示的互動效果不同，預設為勾選開啟固定顯示。

注：不支援多層餅圖、熱力地圖及系列顏色「連續漸變」形態下圖表，系列顏色為「區域漸變」時，固定顯示效果和 2.5.1 節普通圖例效果一致。

2.6 格式

當圖表為地圖、鑽取地圖、熱力地圖、氣泡圖、散點圖、詞雲圖時，設定 圖表系列顏色劃分 為「值」時，圖例會顯示「格式」設定項。

1）標籤格式為「通用」時，圖例顯示格式隨下拉框中所選設定改變，效果如下圖所示：

2）標籤格式為「自訂」時，可透過輸入 JavaScript 程式碼，使用 HTML 解析文字內容，實現圖例自訂格式。詳情可參見：圖表使用 HTML 解析文字內容 。