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

下載內容時，系統不會將 HTML 格式套用至以文字為主的下載格式，例如 TXT、CSV、Excel 或 JSON。

使用有效的 HTML

為防止特定安全漏洞，Looker 會限制可使用的 HTML 標記和屬性，以及可使用的 CSS 屬性。詳情請參閱 HTML 消毒說明文件頁面。

Liquid 變數

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

範例

以下列舉幾個使用 html 欄位參數的範例。

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

如需更多範例，瞭解如何使用 HTML 自訂資料視覺化中欄位值的字型和顏色，請參閱「Getting the most out of visualizations in 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 格式只會顯示在表格、表格 (舊版) 和單一值圖表，以及合併多個欄位時的圖表工具提示。如果使用 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 欄位的值而異。如果值為「已付款」，背景顏色會是淺藍色；如果值為「已出貨」，背景顏色會是淺綠色；如果值為其他內容，背景顏色會是橘色。舉例來說，如果資料表含有「已退回」值，該儲存格就會有橘色背景。

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

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>;;
}