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