如何為面積圖添加資料並配置樣式 - Quick BI

面積圖可用來展示在一定時間內資料的趨勢走向以及它們所佔的面積比例。本文為您介紹如何為面積圖添加資料並配置樣式。

前提條件

已建立儀表板，請參見建立儀表板。

圖表概述

使用情境

在面積圖中，可以得出資料隨時間變化的結論，例如資料隨時間遞增、資料隨時間遞減、資料是否呈現周期性變化、資料稱指數性增長等。

優勢簡介

計算能力：一鍵配置同環比、累計計算，智能輔助線、趨勢線、預測走勢、異常點檢測、波動分析。
視覺效果：支援面積圖、堆積面積、百分比堆積效果，可顯示標籤、圖例、縮減軸等配置。
資料對比標註能力：支援對資料進行同期對比、並進行數值標註。

效果圖樣本

使用限制

面積圖由值軸/度量、類別軸/維度和顏色圖例/維度組成：

類別軸由資料的維度決定，至少選擇1個維度。例如日期、省份或產品類型。
值軸由資料的度量決定，至少選擇1個度量。例如訂單數量。
顏色圖例由資料的維度決定，只能選擇1個維度。例如運輸方式。
說明
當值軸上存在多個度量欄位時，若顏色圖例中拖入了自訂維度欄位，此時需要開啟圖表內指標篩選器，才可在同一圖表中切換查看各指標的資料情況。
拆分由資料的維度決定，只能選擇1個維度。例如產品類型。

圖表資料配置

在資料頁簽，選擇需要的維度欄位和度量欄位：
- 在維度列表中，找到省份，雙擊或拖拽至類別軸/維度地區。
- 在維度列表中，找到產品類型，雙擊或拖拽至顏色圖例/維度地區。
- 在度量列表中，找到訂單金額，雙擊或拖拽至值軸/度量地區。
單擊更新。
（可選）您可以選擇在拆分/維度中繼續添加維度欄位，以通過分面模式更直觀地展示不同維值下的資料趨勢。
說明
僅支援添加一個拆分維度欄位，且分面模式存在如下功能限制。
- 欄位：對於拆分/維度中的欄位，其進階計算功能僅支援配置 topN、無。
- 樣式：座標軸不支援設定顯示雙 Y 軸；輔助展示不支援設定縮減軸。
- 分析：僅支援設定資料互動，不支援進階設定、分析預警、標註、智能洞察。

圖表樣式配置

下面為您介紹圖表的樣式配置，圖表通用的樣式配置請參見配置圖表標題區。

您可以在配置區頂部的搜尋方塊中輸入關鍵字快速尋找配置項進行配置。同時單擊右側圖表支援操作展開/收合全部類別。

面積圖-搜尋..gif

繪圖區域

在繪圖區域中，設定線圖樣式。

圖表配置項	配置項說明
配色設定	為面積地區配色，您可以使用系統色彩配置，或自訂配色。
可視化圖表切換	設定圖表類型，支援線圖、面積圖、堆積面積圖、百分比堆疊面積圖。
線條類型	設定圖表線條樣式，支援曲線、直線。
線條樣式	設定圖表線條的線型，以及粗細。
空值處理	支援設定直接跨過、置為0，不斷開和線條斷開三種方式。
開啟漸層效果	開啟後，圖表面積地區顏色呈漸層展示。
堆積和百分比堆積	支援面積圖、堆積面積圖和百分比堆疊面積圖的切換。
移動端預設選中	設定選中後，預設選中項支援選擇全域最後一個維值或指定系列最後一個維值。

分面

分面模式下，在分面中，設定圖表排列的布局及樣式。

說明

僅當拆分/維度中配置了相關欄位時，分面模式才生效。

圖表配置項		說明
配置樣式		設定圖表排列布局，支援單列對比和網路分布兩種模式。
共用座標軸		設定圖表是否需要共用同一座標軸。
顯示分割線		設定在圖表與圖表之間是否顯示分割線。當設定為顯示狀態，您可以進一步配置分割線的顏色及樣式。
列數		當配置樣式選擇為網路分布時，支援設定圖表排列的列數。預設為自動，您也可以根據實際需求自訂欄數。說明 PC 端和移動端的排列列數需分別配置，您可以通過當前頁面上方切換配置的終端。 PC 端列數可配置範圍為 1-6；移動端為 1-3。
分面區塊最小寬高		設定每個圖表的最小寬高，不同配置樣式下支援配置的資訊不同。單行對比、網格分布下開啟自動列數：僅支援配置分面區塊的最小寬度。網格分布下開啟自訂欄數：支援配置分面區塊的最小寬度及高度。
行列間距		設定各圖表間的行列間距。不同配置樣式下支援配置的資訊不同。單行對比：僅支援配置圖表之間的列間距。網路分布：支援配置圖表之間的行間距、列間距。
拆分標籤	位置	設定維值標籤的顯示位置，支援設定在圖表上方或圖表下方。
	文本	設定維值標籤的字型顏色及樣式。
	對齊	設定維值標籤的對齊。

座標軸

在座標軸中，設定座標軸樣式，預設選中顯示座標軸。

您可以勾選顯示雙Y軸，僅當添加的度量個數≥2個時，設定的雙Y軸才生效。選中該選項，則在座標軸地區會出現右Y軸。

名稱	配置項	說明
X軸	顯示X軸	設定是否顯示X軸。
	顯示標題和單位	設定X座標軸上是否顯示軸標題和單位。
	顯示軸標籤	設定X軸上是否顯示標籤，以及軸標籤顯示規則、文本樣式。
	展示內容	設定展示內容為部分或全部維度。
	顯示刻度標記	設定X軸上是否顯示刻度標記。
	顯示座標軸	設定是否顯示X軸，包括線型、線寬和顏色。
	顯示軸標籤	設定X軸上是否顯示標籤。
	顯示網格線	設定X軸上是否顯示網格線，包括線型、線寬和顏色。
左Y軸	Y軸刻度翻轉	您可以設定翻轉Y軸刻度值。
	顯示左Y軸	設定是否顯示左Y軸。
	顯示標題和單位	設定是否顯示軸標題和單位。
	顯示軸標籤	設定左Y軸上是否顯示標籤，以及標籤與刻度範圍、軸標籤顯示格式設定。
	顯示刻度標記	設定左Y軸上是否顯示刻度標記。
	顯示座標軸	設定是否顯示左Y軸，包括線型、線寬和顏色。
	顯示網格線	設定左Y軸上是否顯示網格線，包括線型、線寬和顏色。
	軸值範圍與間隔	支援自動與手動設定左Y軸標籤與刻度範圍的最大值/最小值。支援設定自訂間隔按步長或按等分數量。

說明

僅當選中顯示雙Y軸時，需要配置右Y軸，參數配置同左Y軸。

圖例

在圖例中，點擊表徵圖即可開啟圖表圖例，並設定圖例樣式。

PC端配置

圖表配置項

配置項說明

位置

設定PC端圖例的顯示位置及對齊。

當顯示位置選擇為上、下時：支援選擇居左、置中以及居右的對齊。
當顯示位置選擇為左、右時：支援選擇頂部、置中、底部的對齊。此時您還可以進一步設定圖例與圖表資料內容間的距離。

文本

設定PC端圖例的文本樣式，支援設定字型顏色、大小、粗細及是否傾斜。

移動端配置

圖表配置項		配置項說明
位置		設定移動端圖例的顯示位置及對齊。當顯示位置選擇為上、下時：支援選擇居左、置中以及居右的對齊。當顯示位置選擇為左、右時：支援選擇頂部、置中、底部的對齊。此時您還可以進一步設定圖例與圖表內容間的距離。說明當位置選擇為上時，可開啟圖例下標籤。
文本		設定移動端圖例中，度量名稱的文本樣式，支援設定字型顏色、大小、粗細及是否傾斜。
顯示標籤內容當位置選擇為上，點擊表徵圖可開啟圖例下標籤	內容	設定圖例下標籤展示的資料內容，支援選擇佔比、總計。佔比：當前維度下，某一資料點佔總數的百分比。例如：辦公用品中，利潤金額佔總收入的百分比。總計：當前維度下，所有度量的總和值。例如：2025年，各地區銷售額的總和值。
	樣式	設定圖例下標籤文本的排版方式，支援選擇以下方式。多行等分：根據每行最多可展示中填入的列數，及每頁最多可展示中填入的行數，自動等分排欄標籤。一行平鋪：所有標籤內容在同一行顯示。純文字：無表徵圖僅展示文字內容，且文字顏色將跟隨對應度量在圖表中的線條顏色。
	未選中時，指標展示為	當樣式選擇為多行等分、一行平鋪時，您可以進一步設定當報表查看者未選中圖例時，如何處理其指標展示方式。支援選擇顯示為“-”或顯示空。
	佔比位置	當內容中選中了展示佔比資料，且樣式選擇為多行等分、一行平鋪時，您可以進一步設定佔比資料的顯示位置，支援選擇位於數值標籤的下方或右側。
	文本樣式	當樣式選擇為多行等分、一行平鋪時，可進一步設定數值文本的樣式。若內容中選擇顯示佔比資料，支援單獨為佔比資料的文本設定格式，以區別於數值標籤內容，增強不同資料間的視覺差異。
	佔比小數位	當內容中選擇了顯示佔比資料時，可按需調整佔比的小數位元。
	文本全量展示	當樣式選擇為多行等分、一行平鋪時，可能會遇到度量名稱過長而被隱藏的情況，此時如果您仍需要顯示完整的度量名稱，可勾選文本全量展示。
	顯示工具提示欄位	勾選後，您在欄位面板工具提示/度量中配置的欄位將會在圖例地區顯示。說明按維值拆分的情境（即顏色圖例為維度）不支援展示工具提示欄位。

資料標籤

在資料標籤中，設定是否顯示資料標籤以及標籤樣式。

圖表配置項	配置項說明
全量顯示	設定是否全量顯示資料標籤。
位置	設定標籤顯示位置。
文本	設定標籤文本樣式。

工具提示

在工具提示中，點擊表徵圖即可開啟工具提示，並設定工具提示方式。

PC端配置

圖表配置項	配置項說明
展示方式	設定提示資訊展示方式，支援按單資料點、按維值兩種方式。
內容	選擇工具提示中展示的資料內容。不同配置條件下可選的展示內容不同：當展示方式為按單資料點時，支援佔比；當展示方式為按維值時，支援總計和佔比。佔比：當前維度下，某一資料點佔總數的百分比。例如：辦公用品中，利潤金額佔總收入的百分比。總計：當前維度下，所有度量的總和值。例如：2025年，各地區銷售額的總和值。
背景色	設定工具提示框的背景填充色。
文本	設定工具提示框中文本的樣式，支援設定字型顏色、大小、粗細及是否傾斜。

移動端配置

圖表配置項		配置說明
懸浮氣泡點擊表徵圖即可開啟懸浮氣泡顯示（①）	內容	設定懸浮氣泡中展示的資料內容，支援選擇佔比、總計。佔比：當前維度下，某一資料點佔總數的百分比。例如：辦公用品中，利潤金額佔總收入的百分比。總計：當前維度下，所有度量的總和值。例如：2025年，各地區銷售額的總和值。
	背景色	設定懸浮氣泡的背景填充色。
	文本	設定懸浮氣泡中的文本樣式，支援設定字型顏色、大小、粗細及是否傾斜。
顯示軸維度點擊表徵圖即可開啟軸維度顯示（②）	背景色	設定軸維度標籤的背景填充色。
顯示軸維度點擊表徵圖即可開啟軸維度顯示（②）	文本	設定軸維度標籤的文本樣式，支援設定字型顏色、粗細及是否傾斜。

系列設定

在系列設定中，設定系列樣式。

說明

僅當欄位配置面板中啟用了顏色圖例/維度時，才需要在系列設定中設定別名和數值顯示格式。

圖表配置項	配置項說明
請選擇欄位	根據業務情境選擇維度或度量項。
別名	設定貼合實際業務情境的欄位名稱。該項僅當配置了顏色圖例/維度時，才支援配置。
線條樣式	設定線條的線型及粗細。說明堆積與百分比堆積不支援該功能。
顯示標記點	支援設定標記點顯示為圓、空心圓、菱形和空心菱形。說明堆積與百分比堆積不支援該功能。
顯示資料標籤	選擇是否顯示資料標籤，並設定標籤的顏色、位置。
數值顯示格式設定	在選擇顯示資料標籤的前提下，支援配置資料標籤中數值的顯示格式。您可以選擇自動適配、自訂適配及手動輸入三種格式。該項僅當配置了顏色圖例/維度時，才支援配置。
顯示最值	設定是否顯示面積圖上最大值和最小值的標籤。說明堆積與百分比堆積不支援該功能。

輔助展示

在輔助展示中，設定指標篩選以及視圖控制項的展示。

圖表配置項

配置項說明

開啟指標篩選展示

設定是否開啟圖表內指標篩選器，開啟後可進一步設定預設選中的指標欄位。

視圖控制項

當圖表軸上資料量多且密集，導致當前容器大小無法完整展示所有資料時，您可以點擊表徵圖開啟圖表視圖控制項，在保證資料完整性和可讀性前提下，使報表查看者能通過滑動的方式動態調整圖表可視範圍，給予使用者自由操作的體驗。

支援通過以下兩種控制項類型來控製圖表軸上的可檢視區範圍：縮減軸、捲軸。

選中縮減軸後，將在圖表底部顯示一條簡化版的全量資料趨勢圖（即縮減軸），報表查看者可通過拖動選區來快速探索全部資料或聚焦特定範圍內的資料。縮減軸是絕對座標，即：縮減軸選定的區間直接對應實際軸的固定資料條數，適用於對比分析情境，或需直接定位的複雜情境。預設僅資料量超過圖表容器可展示寬度時，才會顯示縮減軸。如果您需要在圖表中始終顯示縮減軸，可勾選常駐顯示。勾選後，即使圖表資料未滿屏，縮減軸也會始終展示。
選中捲軸後，將在圖表底部展示一條水平捲軸，報表查看者可以通過橫向拖動滑塊來左右行動裝置檢視視窗。捲軸是相對比例，即：滑塊長度和位置由可視視窗與總資料範圍的比例決定，適用於通用瀏覽情境。您可以進一步設定捲軸的最小類別寬度，從而限制圖表當前視窗內的資料量，以確保圖表內容在可視地區內清晰刻度、避免資料標籤重疊或資料點過度密集導致的視覺效果混亂。最小類別寬度預設為32px，取值範圍為16-100px。
設定最小類別寬度值後，當全量展示下圖表分配的實體類別寬度小於該值時，將顯示捲軸。啟用捲軸後，圖表項目及資料標籤將被約束在座標系的矩形地區內，超出部分（例如：標記點、資料標籤等）將自動截斷或調整位置以適配顯示。

說明

如果圖表未配置視覺控制項，在圖表尺寸過小時，系統會自動開啟視覺控制項，並選中縮減軸且顯示邏輯為僅資料量超過圖表容器可展示寬度時才會顯示。

圖表分析配置

配置項	名稱	說明
互動分析	切入	當您配置了圖表的切入功能時，可以對切入層級行的展示樣式進行配置。具體請參見切入。
	聯動	當需要分析的資料存在於不同的圖表，您可以通過圖表聯動，把多個圖表關聯起來，形成聯動進行資料分析。具體設定請參見聯動。
	跳轉	當需要分析的資料存在於多個儀表板時，您可以通過儀表板跳轉，把多個儀表板關聯起來，進行資料分析。跳轉包含參數跳轉和外部連結兩種方式。具體設定請參見跳轉。
分析預警	輔助線	通過輔助線可以查看當前度量值與輔助線設定值之間的差異。輔助線設定值分為固定值和計算值兩種。計算值包含平均值、最大值、最小值和中位元四類。具體設定請參見分析預警。
分析預警	趨勢線	通過趨勢線可以展示當前資料的整體發展趨勢。趨勢線分為智能推薦、線性、對數、指數、多項式、冪函數六種。具體設定請參見趨勢線。
標註	-	當圖表中的資料存在異常或需要重點關注時，支援使用顏色高亮、表徵圖、注釋或資料點的方式行標註，協助您識別異常並採取相應的行動。具體設定請參見標註。

後續步驟

當其他人需要查看儀表板時，您可以分享儀表板給特定的人，請參見分享儀表板。
當您需要製作複雜的帶導覽功能表，用於專題類分析時，可以將建立好的儀表板整合到資料門戶，請參見資料門戶。