充分運用 Looker 視覺化內容食譜:自訂條件式格式

視覺化醒目顯示符合 (或不符合) 特定條件的值,可讓使用者快速掌握資料趨勢。在 Excel 或其他試算表應用程式中,這種模式通常稱為條件式格式

舉例來說,這個表格資料視覺化項目來自本頁「直接在視覺化設定中使用條件式格式」一節,可協助使用者找出使用者成長可能呈現正面或負面情形的區域:

Looker 支援多種視覺化資料的條件式格式設定:

  • 使用資料表計算和表情符號。當您需要直接在 Looker 探索資料中建立決定格式的條件時,這個方法最適合。參閱「使用資料表計算功能的條件式格式設定」最佳做法頁面,瞭解如何在使用資料表計算功能的圖表中套用自訂格式。
  • 使用文字和表格圖表的視覺化設定內建選項。
  • 使用 html LookML 參數。當指定欄位的分析中,決定格式設定的條件一致時,這會是格式設定值的理想做法。

本食譜提供後兩個選項的教學課程:

搭配視覺化呈現設定的條件式格式設定

您可以使用視覺化呈現設定,在表格圖表單一值視覺化呈現單一記錄視覺化呈現中套用條件式格式設定。

本節提供在圖表表格中使用條件式格式設定的操作指南,您可以透過「Edit」選單中的可視化設定來設定。

如需單一值資料視覺化報表的條件式格式設定步驟,請參考「充分運用 Looker 的資料視覺化工具」中的「使用單一值資料視覺化報表呈現大量資訊」食譜,瞭解相關步驟。

食材

事前準備

如要建立含有條件式格式的表格圖表,請完成下列步驟:

範例

行銷團隊想查看每月的新使用者人數,並依年齡層進行區隔,以便進一步瞭解每月推出的行銷宣傳活動的回應情形。

表格資料視覺化和探索資料表,顯示按「使用者建立月份」分組的「使用者人數」資料,並以八個「使用者年齡層」欄位 (10-19、20-29、30-39 等,最高至 80 歲以上) 樞紐分析。

部分使用者可能難以解讀預設的資料表可視化資料。您可以在視覺化設定中使用條件式格式,比較目標或設定規則的值,讓使用者更容易理解資料。

在這個範例中,行銷團隊想根據下列條件比較表格中的值:

  • 成長正向 (綠色):新增使用者人數達 50 人以上的月份和年齡層
  • 平均成長 (黃色):月齡和年齡層有 25 到 50 位新使用者
  • 成長不佳 (紅色):新使用者人數少於 24 人的月份和年齡層

如要將條件式格式套用至表格資料視覺化,請完成下列步驟,並在資料視覺化工具的「編輯」選單中設定相關選項:

  1. 開啟「視覺化」列的「編輯」選單。
  2. 視需要從「Plot」分頁選取任何表格樣式選項,包括使用「Table Theme」下拉式選單選擇表格主題,或是選取或取消選取「Show Row Numbers」切換鈕,選擇是否要顯示列號。
  3. 在「圖表」分頁中,選取「儲存格視覺化」選項,即可停用該選項。如要將條件式格式套用至表格值,儲存格圖表 必須停用。
  4. 在「格式設定」分頁中,選取「啟用條件式格式設定」切換鈕,即可啟用條件式格式設定並存取相關設定。
    • 你也可以在「格式」分頁的「顏色」部分,透過「系列」下拉式選單選擇色版,並在「自訂」部分的「列」欄位中自訂列大小 (以像素為單位),以及在「標題」欄位中自訂欄標題的文字對齊方式、字型大小和顏色。
    • 在本範例中,系統會選取「納入空值並視為 0」選項,以便將空值視為 0。
  5. 建立條件式格式規則。你可以選取「新增規則」按鈕,新增任意數量的條件式格式規則。
    • 在「套用至」下拉式選單中,選取要套用至規則的值。
  6. 在「格式」下拉式選單中,選取要套用至規則的格式。 * 您可以選擇使用預設的「沿著刻度」格式,系統會根據您選擇的調色盤和值設定,在漸層上醒目顯示值。如要進一步瞭解等級的顏色編碼,請參閱「有條件格式設定」一節,以及「表格圖表選項」說明文件頁面。

    • 視需要為每個規則指定背景顏色字型顏色字型樣式的值。請務必考量顏色對比度,以確保內容無障礙
    • 在這個範例中,系統會建立三個規則:

      • 「格式」選項,如果「值」大於 49,則會選取綠色的「背景顏色」選項。
      • 「格式」選項的「如果值介於 24 到 50 之間」選項,選取黃色「背景顏色」選項。
      • 「格式」選項的「如果值小於」25 的選項,選取紅色的「背景顏色」選項。

產生的視覺化資料會根據行銷團隊指定的條件,顯示各年齡層欄位中的使用者人數:

  • 成長正向 (綠色):新增使用者人數達 50 人以上的月份和年齡層
  • 平均成長 (黃色):月齡和年齡層有 25 到 50 位新使用者
  • 成長不佳 (紅色):新使用者人數少於 24 人的月份和年齡層

使用 html 參數在 LookML 中設定條件式格式

除了使用「視覺化」編輯選單設定外,您也可以直接在欄位的 LookML 中硬式編碼條件式格式設定。這對於在特定欄位中一致的條件式格式很有幫助,因為您不必為個別查詢重新設定視覺化設定。

食材

  • Liquid 變數:Liquid 變數會搭配指定的 HTML 格式,算繪欄位的值。
  • html 參數:在欄位的 html 參數中編寫的 HTML 樣式,會在探索工具的資料表和圖表中顯示。
  • 資料表可視化資料:使用者會在可視化資料中看到條件式格式。

事前準備

html 參數中硬式編碼條件式格式時,必須符合下列條件:

範例

假設資料中含有名為 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."
}
  1. 開發模式中,前往要新增條件式格式的 LookML 欄位。
    • 您可以直接從「探索」前往欄位的 LookML 定義。
  2. 在欄位中新增 html 參數。在本例中,欄位為 status
  3. html 參數中,使用 Liquid 代碼語法建立運算式,設定欄位的特定值條件。
  4. 確認程式碼正常運作後,請儲存、驗證並將程式碼推送至正式環境。

結果是,在包含該欄位的任何 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 圖示、綠色勾號圖示或時鐘圖示 (視狀態而定)。

後續步驟

建立含有條件式格式的表格圖表後,您可以與其他人分享: