html

用量

view: view_name {
  dimension: field_name {
    html: <img src="https://www.brettcase.com/
          product_images/{{ value }}.jpg"/> ;;
  }
}
階層
view
欄位類型
html
可能的欄位類型
維度、維度群組、測量指標

接受
HTML 運算式 (可能使用 Liquid 範本元素)，後面加上兩個分號

定義

您可以使用 html 參數指定欄位包含的 HTML。

您也可以使用液體變數，存取通常會出現在欄位中的值。進而實現多種用途，包括連結其他相關 Look 圖表、連結外部網站或顯示圖片。

HTML 格式只會顯示在表格、表格 (舊版)、KPI (單一值) 和單一值 (舊版) 圖表圖表，以及合併多個欄位時的圖表工具提示中。如果使用 html 參數，將任何互動式內容放在地圖圖表的工具提示中，則使用新版資訊主頁體驗的資訊主頁將無法存取該內容，但 Look、探索和舊版資訊主頁可以存取。

下載內容時，HTML 格式不會套用至文字下載格式，例如 TXT、CSV、Excel 或 JSON。

使用有效的 HTML

為防範特定安全漏洞攻擊，Looker 會限制可使用的 HTML 代碼和屬性，以及可使用的 CSS 屬性。詳情請參閱 HTML 清理說明文件頁面。

Liquid 變數

html 參數支援 Liquid 變數。如要瞭解如何充分運用這些液體變數，請參閱「Liquid 變數」說明文件頁面。

範例

以下舉例說明如何使用 html 欄位參數。

如需更多範例，瞭解如何使用 HTML 自訂圖表中欄位值的字型和顏色，請參閱「充分運用 Looker 圖表」指南的「自訂條件式格式設定」頁面和「自訂圖表工具提示」頁面。

在 html 參數中使用 Liquid 變數

這個範例說明大多數 Liquid 變數在 html 參數中的顯示方式。請參考以下 total_order_amount 定義：

measure: total_order_amount {
  type: sum
  sql: ${order_amount} ;;
  value_format: "0.00"
  html:
    <ul>
      <li> value: {{ value }} </li>
      <li> rendered_value: {{ rendered_value }} </li>
      <li> linked_value: {{ linked_value }} </li>
      <li> link: {{ link }} </li>
      <li> model: {{ _model._name }} </li>
      <li> view: {{ _view._name }} </li>
      <li> explore: {{ _explore._name }} </li>
      <li> field: {{ _field._name }} </li>
      <li> dialect: {{ _dialect._name }} </li>
      <li> access filter: {{ _access_filters['company.name'] }} </li>
      <li> user attribute: {{ _user_attributes['region'] }} </li>
      <li> query timezone: {{ _query._query_timezone }} </li>
      <li> filters: {{ _filters['order.total_order_amount'] }} </li>
    </ul> ;;
}

total_order_amount 顯示的儲存格值如下所示：

  • value: 8521935
  • rendered_value: 8,521,935.00
  • linked_value: 8,521,935.00
  • link: /explore/thelook/orders?fields=orders.order_amount&limit=500
  • model: thelook
  • view: orders
  • explore: order_items
  • field: total_order_amount
  • dialect: mysql
  • access filter: altostrat.com
  • user attribute: northeast
  • query timezone: America/Los_Angeles
  • filters: NOT NULL

設定測量指標的條件式格式

根據計數值設定條件式格式：

measure: formatted_count {
  type: count
  html:
    {% if value > 100 %}
      <span style="color:darkgreen;">{{ rendered_value }}</span>
    {% elsif value > 50 %}
      <span style="color:goldenrod;">{{ rendered_value }}</span>
    {% else %}
      <span style="color:darkred;">{{ rendered_value }}</span>
    {% endif %} ;;
}

使用 html 參數探索資料

HTML 格式設定只會在表格、表格 (舊版) 和 KPI (單一值) 圖表，以及合併多個欄位時的圖表工具提示中顯示。如果使用 html 參數，將任何互動式內容放在地圖圖表的工具提示中，則使用新版資訊主頁體驗的資訊主頁將無法存取該內容，但 Look、探索和舊版資訊主頁可以存取。

假設資料中有一個名為 status 的欄位，用於提供每筆訂單的狀態。status 的可能值如下：

  • Paid
  • Shipped
  • Returned

探索資料時，您可能想為每個狀態設定不同的背景顏色。方法是在維度的 html: 參數中使用 Liquid HTML。如下所示：

dimension: status {
  sql: ${TABLE}.status ;;
  html: {% if value == 'Paid' %}
      <p style="color: black; background-color: lightblue; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% elsif value == 'Shipped' %}
      <p style="color: black; background-color: lightgreen; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% else %}
      <p style="color: black; background-color: orange; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% endif %}
;;
}

在表格中，每個儲存格的背景顏色會因 status 欄位的值而異。如果值為「Paid」，背景顏色會是淺藍色；如果值為「Shipped」，背景顏色會是淺綠色；如果值為其他值，背景顏色會是橘色。舉例來說，如果表格包含「已退貨」值，該儲存格就會有橘色背景。

您可以使用相同語法，根據儲存格值新增圖示或圖片：

dimension: status {
    sql: ${TABLE}.status ;;
    html: {% if value == 'Shipped' or value == 'Complete' %}
         <p><img src="https://findicons.com/files/icons/573/must_have/48/check.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% elsif value == 'Processing' %}
        <p><img src="https://findicons.com/files/icons/1681/siena/128/clock_blue.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% else %}
        <p><img src="https://findicons.com/files/icons/719/crystal_clear_actions/64/cancel.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% endif %}
;;
}

在表格中，這會顯示為：

訂單商品狀態 訂單商品數量
「已取消」圖示。已取消 6,316
「完成」圖示。完成 232,791
「處理中」圖示。處理中 809
「已取消」圖示。已退貨 2,354
「完成」圖示。已出貨 1,474

生成產品圖片

以下範例說明如何使用 <img> 標記，根據產品 ID 將產品圖片新增至 Looker：

dimension: product_image {
  sql: ${product_id} ;;
  html: <img src="https://www.altostrat.com/product_images/{{ value }}.jpg" /> ;;
}

如要在使用 html 參數設定輸出格式時保留向下鑽取連結，可以加入 HTML 標記 <a href="#drillmenu" target="_self">。例如：

measure: count {
  type: count
  drill_fields: [detail*]
  html:
    <a href="#drillmenu" target="_self">
      {% if value > 10000 %}
        <span style="color:#42a338;">{{ rendered_value }}</span>
      {% elsif value > 5000 %}
        <span style="color:#ffb92e;">{{ rendered_value }}</span>
      {% else %}
        <span style="color:#fa4444;">{{ rendered_value }}</span>
      {% endif %}
    </a>;;
}