跳至主要內容

圖表元件


自訂資料詳情頁中的圖表元件,可擷取應用程式內任一表單的資料,並以動態、多維度的視覺化方式呈現,例如 KPI、分類統計、趨勢與分布等。這些資訊會直接顯示在您目前查看的業務資料記錄旁。

您不必再切換至其他頁面查看統計資料,然後返回原頁面進行操作;所有資訊都能集中顯示於同一個畫面中。

本指南將逐一介紹各種圖表類型、設定方式,以及如何依使用情境選擇合適的圖表。


使用情境

情境

可顯示的內容

CRM

顯示客戶過去一年的訂單金額趨勢,或各產品線的購買占比,讓業務人員能立即評估客戶潛力與偏好。

專案管理

顯示目前專案的任務完成狀態分布,或每日投入工時,協助專案經理在不開啟其他儀表板的情況下,快速發現進度風險。

設備管理

顯示過去一年的故障次數趨勢、維修時間變化,或故障類型分布,讓維護團隊快速掌握設備健康狀況並取得預警資訊。

主要優點是:成員可直接在目前處理的資料詳情頁中,查看具備完整情境資訊的統計結果。


如何新增圖表?

在自訂資料詳情頁中,點選「新增元件」,切換至「圖表」分頁,然後選擇圖表類型。

您也可以在完整元件清單中向下捲動,找到各種圖表類型。


通用設定

所有圖表都具有以下基礎設定。請先完成這些設定,再依各圖表類型進行細部調整。

資料來源

您可以選擇以下兩種資料來源:

  • 關聯表單:指定關聯表單中,與目前資料記錄相關聯的資料。

  • 同一應用程式中的其他表單:指定表單中的所有資料。

資料篩選

選擇資料來源後,您可以新增篩選條件,縮小圖表統計與顯示的資料範圍。

點選「新增篩選條件」,並設定所需條件,例如日期範圍、狀態值、欄位門檻值等。

資料權限

此設定控制成員可查看多少計算後的結果:

權限層級

行為

與來源表單相同的權限

成員只能看到根據其在來源表單中具有查看權限的資料所彙總出的結果。

可存取全部表單資料(預設)

所有成員都能看到完整的彙總結果,不受個別表單資料查看權限影響。當您需要呈現統一且共用的統計資訊,例如團隊 KPI 或全組織總計時,可選擇此設定。

樣式(選用)

選取圖表後,開啟右側的「樣式」分頁:

  • 元件樣式 支援以下兩種樣式

    • 卡片式:元件具有獨立的卡片容器,可突顯元件,並支援自訂卡片背景。

    • 無邊框:不會新增卡片等額外容器,元件內容會自然融入頁面,呈現無縫嵌入的效果。

  • 背景:支援使用純色或圖片作為背景。


圖表類型

KPI 卡片

KPI 卡片可讓您快速查看單一重要業務指標,例如逾期任務數、總營收或活躍使用者數。

KPI 卡片支援條件格式警示,以及依年、季、月、週或日進行同比(YoY)與環比(PtPP)比較。

  • 範例 1:
    使用多張 KPI 卡片,分別顯示專案中的逾期任務數、各狀態的任務數量,以及其他類似指標。

  • 範例 2:
    顯示商店當日與當月的營收,以及相較前一期間的成長情況。

維度與指標

欄位

規則

維度

可新增 0 或 1 個。未新增維度時,卡片會顯示一個彙總數值;新增 1 個維度時,數值會依類別分項顯示,例如依狀態顯示任務數:待處理、進行中、已完成。

指標

必須且只能新增 1 個,決定卡片所顯示的數值。

條件格式

當數值超過或低於指定門檻時,可讓數值變更顏色。

例如,當逾期任務超過 5 項時,將數值顯示為紅色。

點選「設定」即可新增條件。每個條件都需指定門檻值與顯示顏色。

資料比較

資料比較可在 KPI 卡片中顯示指標的同比/環比增減值與增減率,讓查看者能同時掌握目前數值及其變化趨勢。

啟用後,需要設定「日期依據」與「比較方式」。這兩項設定可選擇的內容,會受到前述維度設定影響,分為以下兩種情況。

1)維度未設定或維度不是日期欄位

日期依據:根據所選日期決定要比較的兩個期間。您可以選擇目前資料來源中的任一日期類型欄位。

比較方式:先選擇目前指標的統計時間範圍,再選擇要顯示的比較值。

目前指標的統計時間範圍

可選擇的比較值

今天

較前一日增減值、較前一日增減率、較前一週增減值/增減率、較前一月增減值/增減率、較去年同期增減值/增減率

本週

較前一週增減值、較前一週增減率、較去年同期增減值/增減率

本月

較前一月增減值、較前一月增減率、較去年同期增減值/增減率

本季

較前一季增減值、較前一季增減率、較去年同期增減值/增減率

今年

較去年增減值、較去年增減率

2)維度為日期欄位

日期依據:系統會自動使用目前維度所選擇的日期欄位,無法手動變更。若要變更日期依據,請先修改維度欄位。

比較方式:先選擇目前指標的統計時間範圍(A),再選擇比較值。不過,A 會受到維度日期欄位之彙總粒度影響,如下所示:

維度彙總粒度

可選擇的指標統計時間範圍

可選擇的比較值

今天

較前一日增減值、較前一日增減率、較前一週增減值/增減率、較前一月增減值/增減率、較去年同期增減值/增減率

本週

較前一週增減值、較前一週增減率、較去年同期增減值/增減率

本月

較前一月增減值、較前一月增減率、較去年同期增減值/增減率

本季

較前一季增減值、較前一季增減率、較去年同期增減值/增減率

今年

較去年增減值、較去年增減率

註:當維度日期欄位的彙總粒度為「年-月-日-時」或「年-月-日-時:分」時,不支援比較方式。

顯示選項

完成上述設定後,您可以依需求設定 KPI 卡片的顯示樣式,包含:

  • 資料顯示:若 KPI 卡片已新增維度,可以設定只顯示該維度中前 N 個類別的資料。

  • 顏色:自訂 KPI 卡片的預設顏色。若目前數值符合條件格式規則,會優先套用條件格式所設定的顏色。

  • 字型大小:支援小、中、大三種尺寸。


直條圖

直條圖會使用直條高度比較不同類別的數值。當您需要快速找出最大值、最小值及各類別之間的排名時,適合使用直條圖。

維度與指標

欄位

規則

維度

可新增 1 或 2 個。新增 1 個維度時,直條會依該欄位的值分組;新增 2 個維度時,第一個維度建立主要群組,第二個維度再細分各群組。

指標

使用 1 個維度時,可新增 1 個以上的指標,多個指標的直條會並排顯示;使用 2 個維度時,只能新增 1 個指標。

直條圖類型

類型

顯示內容

維度

指標

一般

每個指標各自顯示一組直條。

1 或 2

1 個維度時可新增 1 個以上;2 個維度時只能新增 1 個

堆疊

同一類別中的多個指標會堆疊在一根直條中,同時呈現總量與組成。

1

2 個以上

百分比堆疊

與堆疊圖相同,但每根直條都會換算為 100%,只比較比例,不比較絕對數量。

1

2 個以上

顯示選項

編號

設定

說明

1

X 軸

顯示標籤文字:勾選後,X 軸會顯示維度中各類別的名稱。

2

Y 軸

標題:自訂 Y 軸名稱,例如「銷售額/件數」。數值範圍:設定最小值與最大值,以固定座標軸範圍。顯示標籤文字:控制是否顯示刻度值。

3

資料顯示

依指標值只顯示前 N 個類別,例如營收最高的 10 個部門。僅在使用 1 個維度時提供。

4

資料標籤

在每根直條上方顯示確切數值。

5

圖例

說明各種顏色分別代表的內容。


橫條圖

橫條圖是直條圖的水平版本,長條會由左向右延伸。

當類別名稱較長,或以水平方向比較數值大小與排名較為自然時,適合使用橫條圖。

維度與指標

欄位

規則

維度

可新增 1 或 2 個。新增 1 個維度時,會依該欄位顯示水平長條;新增 2 個維度時,主要群組會顯示於 Y 軸,並在各長條內進一步顯示子群組。

指標

使用 1 個維度時,可新增 1 個以上的指標;使用 2 個維度時,只能新增 1 個指標。

橫條圖類型

類型

顯示內容

維度

指標

一般

每個指標各自顯示一組長條。

1 或 2

1 個維度時可新增 1 個以上;2 個維度時只能新增 1 個

堆疊

同一類別中的多個指標會堆疊在一根長條中,同時呈現總量與組成。

1

2 個以上

百分比堆疊

使用相同的堆疊形式,但會將每根長條換算為 100%,只比較比例。

1

2 個以上

顯示選項

編號

設定

說明

1

Y 軸

標題:自訂 Y 軸名稱,例如「銷售額/件數」。數值範圍:設定最小值與最大值,以固定座標軸範圍。顯示標籤文字:控制是否顯示刻度值。

2

資料顯示

顯示前 N 個類別,僅在使用 1 個維度時提供。

3

資料標籤

在每根長條末端顯示數值。

4

圖例

以顏色說明各指標或維度值。


折線圖

折線圖會以線條連接各資料點,呈現有順序之維度上的趨勢、週期與變化,通常用於時間維度。

折線圖支援同時顯示多條線,以便進行並列比較。

維度與指標

欄位

規則

維度

可新增 1 或 2 個。維度會決定 X 軸的資料順序、資料點數量,以及資料的分組方式。

指標

使用 1 個維度時,可新增 1 個以上的指標,每個指標會形成一條線;使用 2 個維度時,只能新增 1 個指標。

顯示選項

編號

設定

說明

1

線條樣式

線條形狀:支援標準折線與平滑曲線。資料點:勾選後,每個資料點上會顯示圓形標記,方便辨識位置。

2

X 軸

顯示標籤文字:控制是否顯示日期、月份等維度名稱。

3

Y 軸

標題:自訂 Y 軸名稱,例如「銷售金額/萬元」。數值範圍:設定最小值與最大值,以固定座標軸範圍。顯示標籤文字:控制是否顯示刻度值。

4

資料顯示

顯示前 N 個類別,僅在使用 1 個維度時提供,例如顯示「最近 12 個月」。

5

資料標籤

在各資料點旁顯示數值。

6

圖例

當圖表包含多個指標時,用於辨識每條線所代表的內容。


面積圖

面積圖是在折線與 X 軸之間填滿色彩的折線圖。

除了顯示趨勢方向,也能呈現數值規模。當您同時關注趨勢及其累積量體時,適合使用面積圖。

維度與指標

欄位

規則

維度

決定水平軸(X 軸)的資料點順序、顯示的資料點數量及分組方式。可新增 1 至 2 個維度。

指標

決定資料點的垂直高度與填滿區域的數值大小。使用 1 個維度時,可新增 1 個以上的指標;使用 2 個維度時,只能新增 1 個指標。

顯示選項

編號

設定

說明

1

線條樣式

支援標準折線與平滑曲線。標準:面積上緣由直線線段組成。平滑:面積上緣使用平滑曲線,讓整體形狀更加柔和。

2

X 軸

顯示標籤文字:控制是否顯示日期、月份等維度名稱。

3

Y 軸

標題:自訂 Y 軸名稱,例如「銷售額/件數」。數值範圍:設定最小值與最大值,以固定座標軸範圍。顯示標籤文字:控制是否顯示刻度值。

4

資料顯示

顯示前 N 個類別,僅在使用 1 個維度時提供。

5

資料標籤

在各資料點顯示數值。

6

圖例

當多個面積重疊時,以顏色說明各區域代表的內容。


圓餅圖

圓餅圖會將圓形分割成多個扇形,用來呈現各類別占整體的比例。

圓餅圖能快速回答「哪個類別占比最大」,但當多個類別的數值非常接近,需要精確比較時,效果較不理想。

維度與指標

欄位

規則

維度

必須且只能新增 1 個。每個不重複的維度值會形成一個扇形。

指標

必須且只能新增 1 個,決定各扇形的大小。

圓餅圖類型

圓餅圖提供以下三種顯示類型:

  • 實心圓餅圖

  • 粗環形圖

  • 細環形圖

顯示選項

設定

說明

資料顯示

只顯示前 N 個扇形,例如前 5 名;其餘數值會合併至「其他」。

資料標籤

可選擇顯示下列內容:維度值:顯示類別名稱,例如「緊急」與「中等」。數值:顯示具體數值,例如「18」。百分比:顯示所占比例,例如「37.5%」。

圖例

以顏色說明各扇形所代表的類別。


圖表操作

切換圖表類型

已經放置圖表,但想改用其他視覺化方式嗎?

選取圖表,然後點選右上角的圖表類型切換按鈕。系統會自動篩選不符合目前維度與指標數量的圖表類型;不相容的選項會顯示為灰色,無法選取。

重新整理與放大圖表

在自訂資料詳情頁中查看圖表時,將滑鼠游標移至圖表上方,並點選右上角的「重新整理」按鈕,即可載入最新資料。

您也可以點選「放大」,以放大檢視模式查看圖表。


快速參考:不同問題適合使用哪種圖表?

問題

建議圖表

「目前的實際數值是多少?」

KPI 卡片

「誰最大、誰最小?排名如何?」

直條圖或橫條圖

「這項資料隨時間如何變化?」

折線圖

「這項資料的趨勢與整體規模如何?」

面積圖

「各類別分別占多少比例?」

圓餅圖

「總量內部由哪些項目組成?」

堆疊直條圖/堆疊橫條圖,或百分比堆疊圖

是否回答了您的問題?