html

用法

view: view_name {
  dimension: field_name {
    html: <img src="https://www.brettcase.com/
          product_images/{{ value }}.jpg"/> ;;
  }
}
层次结构
view
字段类型
html
可能的字段类型
维度、维度组、测量

接受
一个 HTML 表达式（可能使用 Liquid 模板元素），后跟两个分号

定义

html 参数支持您指定某一字段要包含的 HTML 内容。

您还可以使用 Liquid 变量获取该字段通常包含的值。这使您能够创建许多实用的功能，包括链接到其他相关的 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 字段的值而异。当值为已付款时，背景颜色将为浅蓝色；当值为已发货时，背景颜色将为浅绿色；当值为其他任何值时，背景颜色将为橙色。例如，如果您的表格包含值已退回，则该单元格将具有橙色背景。

您可以使用相同的语法，根据单元格值添加图标或图片：

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