自定义提示

您可以自定义当用户将鼠标悬停在 Looker 可视化图表中的元素上时显示的提示。借助自定义提示，您可以提供更多背景信息、显示更多指标，并为用户量身定制所呈现的信息。借助自定义提示可视化设置，您可以在“探索”样式标签页（或传统“探索”的可视化修改菜单）中，结合使用界面设置和支持 Liquid 模板的 HTML 编辑器来配置提示。

本页面介绍了如何在 Looker（原始版）实例上启用和使用自定义提示可视化设置。本页面包括以下部分：

用户和实例要求

如需访问自定义提示可视化设置，您必须满足以下要求：

  • 您的 Looker（原创版）实例必须运行 Looker 26.4 或更高版本。
  • 如需在探索中制作自定义提示，您必须拥有 explore 权限，并且有权访问底层 LookML 模型。

限制

自定义提示功能具有以下限制：

如何使用自定义提示

如果您拥有适当的权限，则可以在“探索”可视化图表中自定义系列的提示。如需自定义提示，请按以下步骤操作：

  1. 打开或创建探索查询，然后选择支持的可视化图表类型。
  2. 点击配置面板中的样式标签页，即可修改可视化图表。对于传统版“探索”，请在“探索”的可视化图表标签页中点击修改，打开可视化图表编辑器。
  3. 打开系列菜单。
  4. 在自定义部分下，找到要添加提示的系列。如果有多个系列，请展开要添加提示的系列。
  5. 点击自定义提示开关，为该特定系列或图表启用自定义提示功能。
  6. 在自定义提示部分，您可以使用提供的选项调整提示的基本外观：
    • 字号：设置提示字体的字号。
    • 字体系列：设置提示字体的字体系列。
    • 边框半径：设置提示边缘的圆角程度。数字越大，提示边缘越圆。
    • 方框阴影：设置提示框的阴影。
    • 字体颜色：设置提示的字体颜色。
    • 背景颜色：设置提示的背景颜色。
    • 边框颜色：设置提示的边框颜色。
    • Text Alignment（文本对齐方式）：设置提示字体的对齐方式。选择左对齐、居中对齐或右对齐。左对齐是默认设置。
  7. 除了上述选项之外，您还可以点击修改提示内容，打开修改提示内容 HTML 编辑器，应用更高级的样式选项。

  8. 在修改提示内容编辑器中，您可以使用 HTML 和 Liquid 变量来构建和填充提示。

    • 使用标准 HTML 标记设置提示内容的格式（例如 <div>、<span>、<strong>、<table>、<ul>、<ol>）。请注意，呈现的 HTML 需遵循 Looker 的 HTML 清理规则。
    • 自定义提示可能不支持所有 Liquid 变量。

  9. 在修改自定义提示内容时，您可以点击预览（或使用键盘快捷键：Mac 上为 Command-Return，PC 上为 Ctrl+Enter），然后将鼠标悬停在可视化预览窗格中的数据点上，即可预览提示。

  10. 点击 HTML 编辑器中的保存，然后将探索保存为 Look 或保存为信息中心图块，以保留更改。

示例

以下示例展示了不同级别的提示自定义的应用场景：

包含多个测量值的自定义提示

如果您想向用户提供有关可视化图表中显示的数据点的更多背景信息，自定义提示会很有帮助。例如，单值图表仅显示一个测量值。借助自定义提示，您可以显示更多数据，并为用户提供有关图表中数据的更多背景信息。

在此示例中，标题为“2025 年订单数”的单值图表显示了用户国家/地区为“USA”的订单数值，该图表基于一个也包含订单商品数的探索查询。不过，图表中不会显示订单商品数量的值。

以下 HTML 输入到订单数系列的修改提示内容编辑器中，并将内容设置为在提示中包含订单项数值：

<div style="padding: 5px; font-family: Arial, sans-serif; font-size: 13px;">
  <div>
    <strong>Order Items Count:</strong> {{ order_items.count }}
  </div>
  <div>
    <strong>Orders Count:</strong> {{ orders.count }}
  </div>
</div>

“订单数”单值图表的提示显示“订单商品数”值为 54,340，“订单数”值为 39,189。

用户可以同时看到订单数和订单商品数这两个字段的值，并能更好地理解图表中显示的数据。

包含隐藏值的自定义提示，以表格形式呈现

如本页面上的限制信息中所述，自定义提示只能引用探索查询中包含的字段。不过，您可能不希望在图表中显示所有“探索”字段。借助自定义提示，您可以向用户显示在可视化图表中隐藏的字段中的数据，而无需将其添加到图表中。

在此示例中，探索数据表包含订单数和订单项数测量，按用户所在州和订单状态维度分组。开发者希望向用户显示一个小表格，并从表格图表中隐藏 订单状态 和 Order Items Count 字段。不过，开发者仍希望用户能够看到与给定订单数关联的订单状态和订单商品数值。

在订单数系列的修改提示内容编辑器中输入以下 HTML，并将内容设置为在提示中包含订单状态和订单商品数的值，结构为表格：

<div>
    <div>
        <table border="1">
          <!-- Table Body -->
          <tbody>
            <!-- Row 1 -->
            <tr>
              <td>
                <strong>Order status</strong>
              </td>
              <td>
                {{ orders.status }}
              </td>
            </tr>
            <!-- Row 2 -->
            <tr>
              <td>
                <strong>State</strong>
              </td>
              <td>
                {{ users.state }}
              </td>
            </tr>
            <!-- Row 3 -->
            <tr>
              <td>
                <strong>Count of orders</strong>
              </td>
              <td>
                {{ orders.count }}
              </td>
            </tr>
            <!-- Row 4 -->
            <tr>
              <td>
                <strong>Count of order items</strong>
              </td>
              <td>
                {{ order_items.count }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>

表格图表中“Orders Count”值的提示信息，在两列表格中显示“Users State”“订单状态”“Orders Count”和“Order Items Count”的值。

用户可以查看所有探索查询数据，但表格图表中不会显示额外字段。

包含常见 Liquid 函数的自定义提示

自定义提示支持常见的 Liquid 函数，例如管道和使用向下转型语句。在此示例中，柱形图显示按订单状态分组的订单数量。开发者希望设置提示格式，以便用户快速识别“已取消”订单状态和“已完成”订单状态的订单数之间的差异。

在订单数系列的修改提示内容编辑器中输入以下 HTML 和 Liquid 代码，将提示值设置为：状态为“已取消”的订单数显示为红色，状态为“已完成”的订单数显示为绿色。该代码使用变量赋值和管道来确保字符串的准确性，并应用指定的条件格式：

{% assign my_variable = orders.status | downcase | strip %}
{% if my_variable == "complete" %}
  <span style="color:green">{{orders.count}}</span>
{% else %}
  <span style="color:red">{{orders.count}}</span>
{% endif %}

订单状态列中“完成”状态的订单数值在提示中显示为绿色文本。

提示中会显示“Orders Status”（订单状态）列中“Complete”（已完成）对应的“Orders Count”（订单数）值（绿色）。

“已取消”订单状态列的订单数值在提示中显示为红色文本。

提示中会显示“Orders Status”（订单状态）列中“Complete”（已完成）对应的“Orders Count”（订单数）值（绿色）。

用户可以快速区分柱形图中显示的已取消订单和已完成订单。