自定义提示

您可以自定义当用户将鼠标悬停在 Looker 可视化图表中的元素上时显示的提示。借助自定义提示，您可以提供更多背景信息、显示其他指标，并根据用户的需求定制显示的信息。借助自定义提示可视化图表设置，您可以使用界面设置和支持 Liquid 模板的 HTML 编辑器，在探索可视化图表编辑器中配置提示。

本页面提供了有关在 Looker（原始）实例上启用和使用自定义提示 可视化图表设置的指南。本页面包括以下部分：

用户和实例要求

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

限制

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

如何使用自定义提示

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

  1. 打开或创建探索查询，然后选择受支持的可视化图表类型。
  2. 在探索的可视化图表 标签页中，点击修改 以打开可视化图表编辑器。
  3. 点击系列 标签页。
    • 对于 Google 地图图表 和 箱线图，请点击 绘图 标签页，然后继续执行第 5 步。
    • 对于瀑布图，请点击系列 标签页，然后继续执行第 5 步。
    • 对于 单值 图和 单条记录图，请点击 样式 标签页，然后继续执行第 5 步。
    • 对于漏斗图，请点击标签 标签页，然后继续执行第 5 步。
    • 对于时间轴图，请点击选项标签页，然后继续执行第 5 步。
  4. 在自定义 部分下，找到要添加提示的系列。如果有多个系列，请展开要添加提示的系列。
  5. 点击自定义提示 开关，为该特定系列或图表启用自定义提示功能。
  6. 在自定义提示 部分，您可以使用提供的选项调整提示的基本外观：
    • 字体大小：设置提示字体的字体大小。
    • 字体系列：设置提示字体的字体系列。
    • 边框半径：设置提示边缘的圆角程度。数值越高，提示边缘越圆。
    • 框阴影：设置提示框的阴影。
    • 字体颜色：设置提示的字体颜色。
    • 背景颜色：设置提示的背景颜色。
    • 边框颜色：设置提示的边框颜色。
    • 文字对齐方式：设置提示字体的对齐方式。选择左对齐 、居中对齐 或右对齐 。左对齐 是默认设置。
  7. 除了上述选项之外，您还可以点击修改提示内容 以打开 修改提示内容 HTML 编辑器，从而应用更高级的样式选项。

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

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

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

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

示例

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

包含多个衡量指标值的自定义提示

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

在此示例中，一个名为“2025 年的订单数”的单值图表显示了用户国家/地区 “美国”的订单数 值，并且基于一个探索查询，该查询还包括订单项数 。不过，订单项数 的值未显示在图表中。

以下 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。

用户能够看到订单数 和订单项数 这两个字段的值，并获得有关图表中显示的数据的更多背景信息。

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

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

在此示例中，探索数据表包含衡量指标订单数和订单项数，并按维度用户所在州/省/市/自治区和订单状态分组。开发者希望向用户显示一个小表格，并从表格图表中隐藏字段订单状态 和订单项数 。不过，开发者仍然希望用户看到与给定订单数 关联的订单状态 和订单项数 值。

以下 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>

表格图表中“订单数”值的提示以双列表格的形式显示“用户所在州”“订单状态”“订单数”和“订单项数”的值。

用户可以看到所有探索查询数据，而无需在表格图表中显示其他字段。

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

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

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

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

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

在“已完成”订单状态列中，工具提示以绿色显示“订单数”值。

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

在“已完成”订单状态列中，工具提示以绿色显示“订单数”值。

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