統計圖庫(Chart)

統計圖庫(Chart) 是一種視覺化元件，能夠透過圖表方式直觀呈現數據，幫助使用者快速分析與比較資訊。使用者可依據需求選擇不同類型的圖表，如 直條圖、折線圖、圓餅圖、區域圖 等，並透過拖曳數據欄位的方式，自訂 X 軸、Y 軸及分類項目，使頁面更加清晰易讀。

此章節包含主題:

適用時機

當需要清楚透過圖表呈現數據趨勢、比較不同類別或分析數據變化時，統計圖庫 (Chart) 是適合的呈現方式。

範例-繪出統計圖庫(Chart)

以下範例示範以 Data Warehouse(DW)作為資料來源，使用統計圖庫(Chart)控制項的設計效果。

可以按照以下步驟進行操作：

1. 新增頁面及資料準備，請參考設計方式>> 新增頁面及資料來源設計

2. 在左側的控制項清單中找到「統計圖庫」元件，點擊後即可開啟該元件的設定畫面。



3. 在 統計圖庫 內，使用者可選擇不同類型的圖表來視覺化數據。我們這邊點擊「直條圖」。點擊 直條圖 後，系統將插入對應的圖表，並允許設定 X 軸、Y 軸及 Y 軸分類項目，以便清楚呈現不同數據分類與趨勢。使用者可依需求選擇 堆疊直條圖、100% 堆疊直條圖、瀑布圖等，靈活應用於各種數據分析情境。



4. 在 直條圖 中，使用者可透過拖曳資料來源來設定圖表內容。

畫面左手邊的資料來源會顯示資料來源，可以透過點選拖拉的方式，拖拉到規格的 X 軸、Y 軸，拖拉的過程畫面右手邊會顯示直條圖的資料畫面。

• 從左側「量值」區域找到「金額」欄位，然後拖拉至「Y 軸」欄位。

• 從左側「維度」區域找到「類別名稱」欄位，然後拖拉至「X 軸」欄位。

如果設定完成，就可以點選畫面左上角的「完成」以儲存設定。



5. 此時調整統計圖庫(Chart)在版面上的大小（請點擊視覺化控制項周圍的白色調整點)，如果調整完成，就可以點選畫面左上角的「存檔」以儲存設定，點選「預覽」執行效果。



6. 以下就是統計圖庫(Chart)的執行的結果。

圖表類型

此選單提供多種圖表類型，使用者可根據數據特性選擇合適的視覺化方式，包括：

• 直條圖：適用於比較不同分類的數值，例如年度銷售額。

• 橫條圖：與直條圖類似，但以橫向顯示，適合類別較多時使用。

• 圓餅圖：適用於顯示各類別的比例分佈，例如市場佔比。

• 區域圖：用於表現數據變化趨勢，與折線圖相似但更強調面積。

• 折線圖：適合顯示連續數據的趨勢，如氣溫變化或銷售成長。

• 散佈圖：用於顯示兩組數據間的關係，例如廣告支出與銷售額的關聯。

• 其他：包含特殊圖表，如雷達圖與漏斗圖，適用於特定分析需求。

使用者可點擊相應的圖表圖示，即可套用至統計圖庫 (Chart) 中。

樣式

此選單提供多種 圖表樣式，使用者可依需求選擇不同的視覺化效果，包括：

• 預設：系統提供的標準樣式，適用於一般數據視覺化。

• 簡易樣式：簡化視覺效果，去除多餘裝飾，適合專注於數據本身的應用。

• 資料標籤顯示：在圖表上直接顯示數值，提升數據辨識度。

• 資料列表顯示：將數據以表格與圖表結合顯示，適合需要同時檢視數據細節與趨勢的應用場景。

• 子母視窗顯示：可將主圖表與子圖表同時呈現，適用於需要深入比較不同層級數據的情境。

• 科技風格：以鮮豔對比色及數位風格呈現數據儀表板。

使用者可點擊相應的圖表圖示，即可套用至統計圖庫 (Chart) 中。

基本選項

此區域提供圖表的基本外觀與樣式設定，使用者可根據需求調整以下選項：

• 顯示標題： 勾選後可顯示或隱藏圖表標題。

• 統計圖標題： 可自訂圖表的標題內容。

• 標題字型大小： 調整標題的字體大小。

• 標題字型顏色： 設定標題文字的顏色。

• 背景顏色： 更改圖表的背景色，並可選擇是否透明化。

• 框線顏色： 設定圖表的外框顏色。

• 框線粗細： 調整圖表外框的線條寬度。

• 邊角圓滑幅度： 設定圖表邊角的圓滑程度。

• 邊界範圍： 調整圖表的邊距範圍，使其與畫面保持適當距離。

• 自動產生： 勾選後系統將根據數據自動調整顯示範圍。

• 選取的區塊顏色： 設定使用者點擊選取時的區塊顏色。

• 選取的線條顏色： 設定選取時的線條顏色。

• 顯示預設選取資料： 設定是否自動顯示預設選取的數據內容。

這些選項可用於自訂圖表的外觀，使其符合報表或儀表板的視覺風格。

數列設定

此區域允許使用者設定圖表中數據列的顯示方式，例如 數據欄位的可見性、圖表類型及進階設定。

• 眼睛圖示：點擊可切換數據列的顯示或隱藏。

• 圖表類型圖示：顯示選擇的圖表類型，如直條圖、折線圖等。

• 設定齒輪：進入進階數列設定，可調整顯示名稱、類型(直條圖、區域圖、折線圖等)、Y軸類型及圖層順序。

使用者可根據需求調整數列設定。

座標軸:X軸

此區域提供 X 軸的各項設定，讓使用者能夠調整顯示方式與樣式。

• 顯示：勾選後可顯示或隱藏 X 軸。

• 標籤顯示：勾選後顯示 X 軸的標籤名稱。

• 格線顯示：勾選後在圖表上顯示 X 軸的網格線。

• 座標軸置頂：將 X 軸移動至圖表的頂端顯示。

• 隱藏上層文字：隱藏 X 軸的標籤上層文字，使畫面更簡潔。

• 標題文字：自訂 X 軸的標題內容。

• 標題字型大小：設定 X 軸標題的字體大小。

• 標題字型顏色：調整 X 軸標題的顏色。

• 字型大小：設定 X 軸數據標籤的字體大小。

• 字型顏色：設定 X 軸數據標籤的顏色。

• 文字旋轉角度：調整 X 軸標籤的旋轉角度。

• 間隔距離：設定標籤之間的間距。

• 文字分行：設定標籤是否換行顯示。

• 分隔符號：設定 X 軸標籤的分隔符號，如斜線或逗號。

• 軸線顏色：調整 X 軸的軸線顏色。

• 項目間距：調整 X 軸數據標籤之間的間距比例。

透過這些設定，使用者可自訂 X 軸的顯示方式。

座標軸:Y軸

此區域提供 Y 軸的設定選項，讓使用者能夠調整數據顯示方式與樣式。

• 顯示：勾選後可顯示或隱藏 Y 軸。

• 標籤顯示：勾選後顯示 Y 軸的標籤名稱。

• 格線顯示：勾選後顯示 Y 軸的格線。

• 數值從 0 開始：勾選後強制 Y 軸從 0 起始，以維持數據顯示的一致性。

• 標題文字：自訂 Y 軸標題內容。

• 標題字型大小：設定 Y 軸標題的字體大小。

• 標題字型顏色：調整 Y 軸標題的顏色。

• 字型大小：設定 Y 軸數據標籤的字體大小。

• 字型顏色：設定 Y 軸數據標籤的顏色。

• 文字旋轉角度：調整 Y 軸標籤的旋轉角度。

• 字首：設定數據標籤的前置字元，如貨幣符號。

• 字尾：設定數據標籤的後置字元，如百分比符號。

• 數值格式：自訂 Y 軸數值的顯示格式。

• 最大值/最小值：設定 Y 軸數據範圍的最大值與最小值。

• 間隔距離：調整 Y 軸標籤之間的間距。

• 軸線顏色：設定 Y 軸的軸線顏色。

• 顯示單位：勾選後顯示數據單位，如「千」、「萬」等。

透過這些設定，使用者可根據需求自訂 Y 軸的顯示方式。

第二Y軸

此區域提供第二 Y 軸的設定，適用於雙數據對比分析。

• 顯示：勾選後可顯示或隱藏第二 Y 軸。

• 標籤顯示：勾選後顯示第二 Y 軸的標籤名稱。

• 格線顯示：勾選後顯示第二 Y 軸的格線。

• 數值從 0 開始：勾選後強制第二 Y 軸從 0 起始，以維持數據顯示的一致性。

• 標題文字：自訂第二 Y 軸標題內容。

• 標題字型大小：設定第二 Y 軸標題的字體大小。

• 標題字型顏色：調整第二 Y 軸標題的顏色。

• 字型大小：設定第二 Y 軸數據標籤的字體大小。

• 字型顏色：設定第二 Y 軸數據標籤的顏色。

• 文字旋轉角度：調整第二 Y 軸標籤的旋轉角度。

• 字首：設定數據標籤的前置字元，如貨幣符號。

• 字尾：設定數據標籤的後置字元，如百分比符號。

• 數值格式：自訂第二 Y 軸數值的顯示格式。

• 最大值/最小值：設定第二 Y 軸數據範圍的最大值與最小值。

• 間隔距離：調整第二 Y 軸標籤之間的間距。

• 軸線顏色：設定第二 Y 軸的軸線顏色。

• 顯示單位：勾選後顯示數據單位，如「千」、「萬」等。

透過這些設定，使用者可根據需求自訂第二 Y 軸的顯示方式。

資料標籤

此區域提供資料標籤的設定，讓使用者可根據需求調整數據標註方式。

• 標籤顯示：勾選後可顯示或隱藏數據標籤。

• 顯示內容值：選擇標籤顯示的數據，如自動(顯示全部)、最大值、最小值、最大值/最小值。

• 線條組細：調整標籤連接線的粗細（例如應用於圓餅圖時，可控制標籤與圖表之間的線條粗細）。

• 線條樣式：設定標籤連接線的顯示方式，目前只有 Solid 實線。

• 線條顏色：自訂標籤連接線的顏色。

• 資料標籤顯示：選擇標籤的顯示方式，與系統預設、固定橫向、依寬度自動調整方向。

• 資料標籤呈現類型：此設定決定資料標籤在圖表中的顯示位置，可選擇以下方式：Auto（自動）、Inside（內部）、Outside（外部）、Center（置中）。

• 值為 0 不顯示：勾選後隱藏數值為 0 的標籤。

• 標籤文字：可自訂標籤的顯示內容與格式。

• 字型大小：設定標籤文字的大小。

• 字型顏色：調整標籤文字的顏色。

• 數值格式：設定標籤數據的格式，如小數位數或千分位。

• 隱藏較小的資料點：勾選後自動隱藏小數據點，避免畫面雜亂，需搭配下面的隱藏指定佔比。

• 隱藏指定佔比：設定小於特定百分比的標籤自動隱藏，預設為0(沒有限制)。

透過這些設定，使用者可自訂標籤顯示方式。

圖例

此區域提供圖例的設定，讓使用者可自訂圖例的顯示方式與樣式。

• 顯示：勾選後可顯示或隱藏圖例。

• 水平位置：設定圖例的水平對齊方式，可選擇 Left（左）、Center（置中）、Right（右）。

• 垂直位置：設定圖例的垂直對齊方式，可選擇 Top（上）、Center（中）、Bottom（下）。

• 字型大小：設定圖例內文字的大小。

• 字型顏色：調整圖例文字的顏色。

• 背景顏色：設定圖例區塊的背景顏色。

• 框線顏色：設定圖例區塊的外框顏色。

• 框線粗細：調整圖例外框的線條粗細。

• 邊角圓滑幅度：設定圖例區塊的邊角圓滑程度。

• 文字套用圓示顏色：勾選後，圖例文字將以圓形背景顯示顏色，以增強可視度。

透過這些設定，使用者可靈活調整圖例的位置與外觀。

資料列表

此區域提供資料列表的設定，讓使用者可自訂資料表格的顯示方式與樣式。

• 顯示：勾選後可顯示或隱藏資料列表。

• 顯示外框線：勾選後顯示資料列表的外框線。

• 顯示水平框線：勾選後顯示橫向的框線，以區隔不同資料列。

• 顯示垂直框線：勾選後顯示縱向的框線，以區隔不同資料欄。

• 顯示圖例符號：勾選後在資料列表中顯示對應的圖例符號，方便辨識數據。

• 顯示圖例文字：勾選後在資料列表中顯示對應的圖例標籤。

• 字型大小：設定資料列表中文字的大小。

• 字型顏色：調整資料列表中文字的顏色。

• 取消數值調整：勾選後停用數值調整功能，保持原始數據格式。

• 文字套用數列顏色：勾選後，資料列表內的文字將依據數列顏色顯示，以增強可讀性。

透過這些設定，使用者可靈活調整資料列表的顯示方式。

提示文字

此區域提供提示文字 (Tooltip) 的設定，讓使用者可自訂滑鼠懸停時顯示的資訊。

• 顯示：勾選後可開啟或關閉提示文字。

• 提示文字：可輸入自訂的提示內容。

• 字型大小：調整提示文字的字體大小。

• 字型顏色：設定提示文字的顏色。

• 框線顏色：調整提示框的外框顏色。

• 背景顏色：設定提示框的背景顏色。

透過這些設定，使用者可根據需求調整提示文字的外觀與內容。

顏色設定

此區域提供顏色設定，讓使用者可自訂圖表的配色方案。

• 自動漸層：勾選後，自動應用漸層色彩，使視覺呈現更具層次感。

• 主題顏色清單：選擇系統內建的主題顏色方案，以確保圖表風格一致。

• 自訂數列顏色：可針對每個數列設定特定顏色，提升數據辨識度。

透過這些設定，使用者可靈活調整圖表的顏色。

元件標題

此區域提供元件標題的設定，使用者可調整標題的顯示方式與樣式。

• 顯示：勾選後可顯示或隱藏元件標題。

• 內容：設定標題的文字內容。

• 對齊方式：選擇標題的對齊方式，可選擇靠左、置中或靠右。

• 字型顏色：設定標題文字的顏色。

• 背景顏色：調整標題區塊的背景顏色。

• 陰影：勾選後為標題文字添加陰影效果，提高可讀性。

• 顯示過濾欄位名稱：勾選後，標題將顯示當前的過濾條件欄位名稱。

• 顯示過濾條件：勾選後，標題將顯示當前應用的過濾條件。

透過這些設定，使用者可自訂元件標題。

折線設定

此區域提供折線圖的相關設定，讓使用者可調整線條樣式與標記方式。

• 線條粗細：設定折線的線條寬度。

• 線條樣式：選擇折線的樣式，例如實線、虛線。

• 標記顯示：勾選後在數據點上顯示標記，以突顯數據位置。

• 標記大小：設定數據點標記的大小。

• 標記類型：選擇標記的形狀，例如圓形、方形或三角形。

透過這些設定，使用者可根據需求自訂折線圖的外觀，使數據趨勢更清晰易讀。

基準線（垂直、X 軸）

此區域提供基準線的設定，使用者可在圖表中新增基準線，以便強調特定數值範圍或對比數據變化。

• 顯示：勾選後可顯示或隱藏基準線。

• 移至最上層：勾選後，基準線將顯示於圖表的最上層，確保不被其他元素遮擋。

• 數值：設定基準線的數值，以作為參考點。

• 起始值：設定基準線的起始位置。

• 結束值：設定基準線的結束位置，適用於區間基準線。

• 線條顏色：調整基準線的顏色。

• 線條樣式：選擇基準線的顯示方式，例如實線（Solid）、虛線（Dashed）或點線（Dotted）。

• 線條粗細：設定基準線的線條寬度。

• 標籤文字：可自訂基準線的標籤內容，以提供額外說明。

• 字型大小：設定標籤文字的大小。

• 字型顏色：調整標籤文字的顏色。

透過這些設定，使用者可靈活調整基準線的顯示方式。

基準線（水平、Y 軸）

此區域提供水準基準線的設定，適用於 Y 軸方向的參考線，讓使用者可以視覺化對比特定數值區間。

• 顯示：勾選後可顯示或隱藏基準線。

• 移至最上層：勾選後，基準線將顯示於圖表的最上層，避免被其他元素遮擋。

• Y 軸類型：選擇基準線適用的 Y 軸類型，例如主要軸或次要軸。

• 數值：設定基準線的對應數值，以作為參考點。

• 起始值：設定基準線的起始位置，適用於區間標記。

• 結束值：設定基準線的結束位置，適用於區間基準線。

• 線條顏色：調整基準線的顏色。

• 線條樣式：選擇基準線的顯示方式，例如實線（Solid）、虛線（Dashed）或點線（Dotted）。

• 線條粗細：設定基準線的線條寬度。

• 標籤文字：可自訂基準線的標籤內容，以提供額外說明。

• 字型大小：設定標籤文字的大小。

• 字型顏色：調整標籤文字的顏色。

透過這些設定，使用者可靈活調整基準線的顯示方式。

十字線設定

此區域提供十字線 (Cross Line) 的設定(應用於折線圖)，使用者可啟用並調整十字線的外觀，以輔助數據定位。

• 顯示：勾選後可顯示或隱藏十字線。

• 十字線類型：選擇適用的十字線類型，例如 X 軸、Y 軸或兩者皆啟用。

• 線條顏色：設定十字線的顏色，以提高對比度。

• 線條樣式：選擇十字線的樣式，例如實線 、虛線 。

• 線條粗細：調整十字線的寬度。

• 顯示資料點：勾選後，在十字線交點處顯示對應的數據點，以輔助數據閱讀。

• 顯示標籤文字：勾選後，十字線會顯示對應數據點的標籤。

透過這些設定，使用者可自訂十字線的外觀與行為。

進階設定

此區域提供進階的視覺與數據處理選項。

• 顯示工具列：勾選後，可顯示圖表的工具列，提供額外的操作功能。

• 啟用動畫提示：勾選後，開啟動畫效果，提高視覺動態呈現。

• 使用格式化條件：勾選後，根據特定條件自動調整圖表樣式，例如改變顏色或標記特定數據。

• 限制筆數：設定顯示的最大數據筆數，以避免資料過多導致圖表擁擠。

• 資料反向取得：勾選後，數據順序將被反轉。

• 將 null 轉為 0：勾選後，將遺漏數據 (null) 自動轉換為 0，以保持數據完整性。

• 啟用滾軸：勾選後，當數據量過多時，允許使用滾軸瀏覽圖表。

• 顯示筆數：設定可見的數據筆數。

• 數列透明度：調整數據列的透明度，以改善圖表的層次感。

• 非選取亮度：調整未選擇數據列的亮度，以突顯重點數據。

• 依資料點分色：勾選後，根據不同的數據點賦予不同顏色，以便區分數據類別。

• 隱藏數列名稱：勾選後，隱藏數列名稱，適用於只關注數據值的情境。

• 畫出 null 值：勾選後，在圖表中顯示遺漏數據點 (null) 而非跳過。

• 值為 0 不顯示：勾選後，數值為 0 的數據點將被隱藏。

• 總是顯示資料標籤：勾選後，無論數據值大小，皆顯示對應的資料標籤。

透過這些進階設定，使用者可進一步微調圖表的呈現方式。