自定义提示

此产品或功能 受服务专用条款的约束。 非正式版产品和功能“按原样”提供，可能只能获得有限的支持。 如需了解详情，请参阅发布阶段说明。

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

本页面将指导您如何在 Looker（原始）实例中启用和使用自定义提示可视化设置。本页面包括以下部分：

• 用户和实例要求
• 局限性
• 如何使用自定义提示
• 示例
• 相关资源

用户和实例要求

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

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

限制

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

• 除以下可视化图表类型外，大多数可视化图表类型都支持自定义提示：
  • 多层环图
  • 字词云图表
  • 静态地图（区域）图表
  • 静态地图（点）图表
  • 使用图表配置编辑器制作的图表（桑基图除外）
  • 自定义可视化图表
• 自定义提示只能引用探索查询中包含的字段。
• 提示只能显示与指定字段相同粒度的数据。如果用户想查看比提示中更精细的数据，必须使用深入分析功能。
• 自定义提示是在可视化图表一级保存的。无法在探索级别保存。
• 如果您从具有自定义工具提示的探索查询中移除某个字段，那么如果用户与您共享该探索查询，并且他们将该字段重新添加到探索查询中，则仍可看到该工具提示。
• 自定义提示中的渲染 HTML 需遵守 Looker 的 HTML 清理规则。
• 并非所有 Liquid 变量都可能支持自定义提示。
• 提示自定义设置会替换应用于内部（非嵌入式）信息中心或嵌入式信息中心的任何主题。

如何使用自定义提示

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

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

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

示例

以下示例展示了不同程度的提示自定义设置的用例：

• 包含多个度量值的自定义工具提示
• 包含隐藏值（以表格形式呈现）的自定义提示
• 包含常用 Liquid 函数的自定义提示

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

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

在此示例中，名为“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>

用户可以查看“订单数”和“订单商品数量”这两个字段的值，从而更全面地了解图表中显示的数据。

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

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

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

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

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

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

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

相关资源

• 详细了解如何创建可视化图表。
• 如需了解在 Looker 中使用 Liquid 的更多方法，请查看 Liquid 变量参考文档页面。
• 如需详细了解 Looker 支持的 HTML 标记，请参阅 HTML 清理文档页面。