視覺化醒目顯示符合 (或不符合) 特定條件的值,可讓使用者快速掌握資料趨勢。在 Excel 或其他試算表應用程式中,這種模式通常稱為條件式格式。
舉例來說,這個表格資料視覺化項目來自本頁「直接在視覺化設定中使用條件式格式」一節,可協助使用者找出使用者成長可能呈現正面或負面情形的區域:
Looker 支援多種視覺化資料的條件式格式設定:
- 使用資料表計算和表情符號。當您需要直接在 Looker 探索資料中建立決定格式的條件時,這個方法最適合。參閱「使用資料表計算功能的條件式格式設定」最佳做法頁面,瞭解如何在使用資料表計算功能的圖表中套用自訂格式。
- 使用文字和表格圖表的視覺化設定內建選項。
- 使用
html
LookML 參數。當指定欄位的分析中,決定格式設定的條件一致時,這會是格式設定值的理想做法。
本食譜提供後兩個選項的教學課程:
搭配視覺化呈現設定的條件式格式設定
您可以使用視覺化呈現設定,在表格圖表、單一值視覺化呈現和單一記錄視覺化呈現中套用條件式格式設定。
本節提供在圖表表格中使用條件式格式設定的操作指南,您可以透過「Edit」選單中的可視化設定來設定。
如需單一值資料視覺化報表的條件式格式設定步驟,請參考「充分運用 Looker 的資料視覺化工具」中的「使用單一值資料視覺化報表呈現大量資訊」食譜,瞭解相關步驟。
食材
- 探索查詢
- 表格視覺化
事前準備
如要建立含有條件式格式的表格圖表,請完成下列步驟:
範例
行銷團隊想查看每月的新使用者人數,並依年齡層進行區隔,以便進一步瞭解每月推出的行銷宣傳活動的回應情形。
部分使用者可能難以解讀預設的資料表可視化資料。您可以在視覺化設定中使用條件式格式,比較目標或設定規則的值,讓使用者更容易理解資料。
在這個範例中,行銷團隊想根據下列條件比較表格中的值:
- 成長正向 (綠色):新增使用者人數達 50 人以上的月份和年齡層
- 平均成長 (黃色):月齡和年齡層有 25 到 50 位新使用者
- 成長不佳 (紅色):新使用者人數少於 24 人的月份和年齡層
如要將條件式格式套用至表格資料視覺化,請完成下列步驟,並在資料視覺化工具的「編輯」選單中設定相關選項:
- 開啟「視覺化」列的「編輯」選單。
- 視需要從「Plot」分頁選取任何表格樣式選項,包括使用「Table Theme」下拉式選單選擇表格主題,或是選取或取消選取「Show Row Numbers」切換鈕,選擇是否要顯示列號。
- 在「圖表」分頁中,選取「儲存格視覺化」選項,即可停用該選項。如要將條件式格式套用至表格值,儲存格圖表 必須停用。
- 在「格式設定」分頁中,選取「啟用條件式格式設定」切換鈕,即可啟用條件式格式設定並存取相關設定。
- 你也可以在「格式」分頁的「顏色」部分,透過「系列」下拉式選單選擇色版,並在「自訂」部分的「列」欄位中自訂列大小 (以像素為單位),以及在「標題」欄位中自訂欄標題的文字對齊方式、字型大小和顏色。
- 在本範例中,系統會選取「納入空值並視為 0」選項,以便將空值視為 0。
- 建立條件式格式規則。你可以選取「新增規則」按鈕,新增任意數量的條件式格式規則。
- 在「套用至」下拉式選單中,選取要套用至規則的值。
在「格式」下拉式選單中,選取要套用至規則的格式。 * 您可以選擇使用預設的「沿著刻度」格式,系統會根據您選擇的調色盤和值設定,在漸層上醒目顯示值。如要進一步瞭解等級的顏色編碼,請參閱「有條件格式設定」一節,以及「表格圖表選項」說明文件頁面。
- 視需要為每個規則指定背景顏色、字型顏色和字型樣式的值。請務必考量顏色對比度,以確保內容無障礙。
在這個範例中,系統會建立三個規則:
- 「格式」選項,如果「值」大於 49,則會選取綠色的「背景顏色」選項。
- 「格式」選項的「如果值介於 24 到 50 之間」選項,選取黃色「背景顏色」選項。
- 「格式」選項的「如果值小於」25 的選項,選取紅色的「背景顏色」選項。
產生的視覺化資料會根據行銷團隊指定的條件,顯示各年齡層欄位中的使用者人數:
- 成長正向 (綠色):新增使用者人數達 50 人以上的月份和年齡層
- 平均成長 (黃色):月齡和年齡層有 25 到 50 位新使用者
- 成長不佳 (紅色):新使用者人數少於 24 人的月份和年齡層
使用 html
參數在 LookML 中設定條件式格式
除了使用「視覺化」編輯選單設定外,您也可以直接在欄位的 LookML 中硬式編碼條件式格式設定。這對於在特定欄位中一致的條件式格式很有幫助,因為您不必為個別查詢重新設定視覺化設定。
食材
- Liquid 變數:Liquid 變數會搭配指定的 HTML 格式,算繪欄位的值。
html
參數:在欄位的html
參數中編寫的 HTML 樣式,會在探索工具的資料表和圖表中顯示。- 資料表可視化資料:使用者會在可視化資料中看到條件式格式。
事前準備
在 html
參數中硬式編碼條件式格式時,必須符合下列條件:
- 建立探索的權限。
- 權限:開發 LookML,並熟悉 SQL 和 LookML 開發作業。
- 具備在 Looker 和 HTML 程式碼中使用 Liquid 的基本知識。請參閱
html
說明頁面的「在html
參數中使用 Liquid 變數」一節,瞭解相關背景資訊。 - 儲存內容的權限 (如果您想將轉換為圖表儲存為 Look 或資訊主頁)
範例
假設資料中含有名為 status
的欄位,用來提供每筆訂單的狀態。以下是 status
的可能值:
- 「已取消」
- 「complete」
- 「pending」
如要向查看包含「狀態」欄位的查詢結果使用者顯示訂單狀態,您可以為每個狀態新增獨特的背景顏色。
如要將條件式格式設定程式碼加入 LookML 欄位,請按照下列步驟操作:
dimension: status {
type: string
sql: ${TABLE}.status ;;
html:
{% if value == 'complete' %}
<p style="color: black; background-color: lightgreen;">{{ value }}</p>
{% elsif value == 'pending' %}
<p style="color: black; background-color: orange;">{{ value }}</p>
{% else %}
<p style="color: white; background-color: red;">{{ value }}</p>
{% endif %}
;;
description: "The current status of an existing order."
}
- 在開發模式中,前往要新增條件式格式的 LookML 欄位。
- 您可以直接從「探索」前往欄位的 LookML 定義。
- 在欄位中新增
html
參數。在本例中,欄位為status
。 - 在
html
參數中,使用 Liquid 代碼語法建立運算式,設定欄位的特定值條件。- 本範例會使用 Liquid 變數
value
輸出欄位值。請務必使用_rendered_value
顯示使用 Looker 值格式的欄位值。 - 請務必考量顏色對比度,以確保內容無障礙。
- 您可以加入任何其他 Looker 支援的 HTML 樣式。如需其他範例,請參閱
html
參數說明文件頁面。
- 本範例會使用 Liquid 變數
- 確認程式碼正常運作後,請儲存、驗證並將程式碼推送至正式環境。
結果是,在包含該欄位的任何 Looker 查詢結果中,狀態值會以紅色、綠色或橘色 (視狀態而定) 醒目顯示。
其他圖表也會顯示背景顏色。舉例來說,如果查詢以「訂單狀態」為依據,將「訂單數量」分組,則資料欄圖會為每個「訂單狀態」值顯示代碼背景顏色。
其他樣式
您可以使用與前述範例相同的語法,根據欄位值新增圖示或圖片。以下範例會為「Orders Status」為「cancelled」的訂單新增紅色「x」勾號圖示、「Orders Status」為「complete」的訂單新增綠色勾號圖示,以及「Orders Status」為「pending」的訂單新增時鐘圖示:
dimension: status {
type: string
sql: ${TABLE}.status ;;
html:
{% if value == 'complete' %}
<p><img src="https://findicons.com/files/icons/573/must_have/48/check.png" height=20 width=20>{{ rvalue }}</p>
{% elsif value == 'pending' %}
<p><img src="https://findicons.com/files/icons/1681/siena/128/clock_blue.png" height=20 width=20>{{ value }}</p>
{% else %}
<p><img src="https://findicons.com/files/icons/719/crystal_clear_actions/64/cancel.png" height=20 width=20>{{ value }}</p>
{% endif %}
;;
description: "The current status of an existing order."
}
結果是「狀態」值,在包含該欄位的任何 Looker 查詢結果中,值旁會顯示紅色 X 圖示、綠色勾號圖示或時鐘圖示 (視狀態而定)。
後續步驟
建立含有條件式格式的表格圖表後,您可以與其他人分享: