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 格式仅在表格、表格（旧版）和单值图表可视化效果中呈现，并且在合并多个字段时，还会在可视化图表提示中呈现。如果使用 html 参数将任何互动内容放置在地图图表的提示框中，那么在使用新版信息中心体验的信息中心内将无法访问该内容，但在 Look、Explore 和旧版信息中心内可以访问该内容。

下载内容时，系统不会将 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（充分利用 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、Explore 和旧版信息中心内可以访问该内容。

假设您的数据中有一个名为 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>;;
}