使用 Liquid 和 HTML 创建动态信息中心图片

您可以在 Markdown 文本块中硬编码图片网址，从而将图片添加到 Looker 信息中心。不过，文字块中的图片是静态的，不会根据结果进行更新。 如果您希望仪表板图片根据用户选择的过滤条件值动态变化，该怎么办？

此最佳实践页面演示了如何使用 Liquid 和 html 参数实现动态信息中心图片。

解决方案

以下解决方案基于一个电子商务数据集，其中包含一个名为 users.state 的字段，表示假设的电子商务数据集中的州： 

dimension: state {
  type: string
  sql: ${TABLE}.state ;;
}

假设您想在信息中心内显示某个州的州旗图片，该信息中心会根据用户选择的过滤条件来更新结果。

您需要完成以下三个步骤才能创建动态信息中心图片：

  1. 在 LookML 中创建图片维度。
  2. 创建动态图片信息中心图块。
  3. 添加信息中心过滤条件并进行最后的美化。

第 1 步：在 LookML 中创建图片维度

如需在 LookML 中创建图片维度，请执行以下操作：

  1. 首先，前往包含您要向其添加图片的维度的项目和视图文件。然后，基于该字段创建一个新维度，专门用于显示图片。

  2. 添加一个 html 参数，用于定义包含 value 变量的 Liquid {% if %} 条件语句，针对您要显示图片的每个值添加一个该参数。

    例如，以下 state_flag_image 维度建立了一个条件，即当 state 的值为 "California"、"New York"、"Colorado" 或 "Illinois" 时，显示指定的图片（带有 html <img> 标记）。对于所有其他状态，您可以显示“无可用图片”图标： 

          dimension: state_flag_image {
          type: string
          sql: ${state} ;;
          html:
              {% if state._value == "California" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg" height="170" width="255">
              {% elsif state._value == "New York" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_New_York.svg/1200px-Flag_of_New_York.svg.png" height="170" width="255">
              {% elsif state._value == "Colorado" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Flag_of_Colorado.svg/255px-Flag_of_Colorado.svg.png" height="170" width="255">
              {% elsif state._value == "Illinois"%}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Illinois.svg/1200px-Flag_of_Illinois.svg.png" height="170" width="255">
              {% else %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png" height="170" width="170">
              {% endif %} ;;
      }
  3. 为要显示图片的每个值创建一个值条件。或者，您也可以使用 value Liquid 变量创建动态图片字段，如如何向可视化图表添加图片社区帖子中所述。

接下来，您可以为图片维度创建信息中心图块。

第 2 步：创建动态图片信息中心图块

现在，您已经创建了图片维度 (state_flag_image)，接下来可以构建一个探索，该探索将成为动态图片信息中心图块。

根据以下条件构建探索：

  • 为原始维度（在本例中为 state）添加过滤条件。将过滤条件设置为任意值。由于未选择任何特定的过滤条件值，因此系统最初会显示“无可用图片”图片。此过滤条件值将根据用户为信息中心过滤条件选择的值进行更新。 
  • 选择图片维度（在本例中为 state_flag_image）以及可能需要纳入确定图片的查询中的任何其他维度（例如，如果您想纳入日期因素，可以添加日期等）。
  • 将行数限制更改为一行。
  • 将可视化图表类型更改为单值可视化图表，并隐藏除图片维度 (state_flag_image) 之外的所有其他列。

您的探索报告最初会在可视化图表面板中呈现的单值可视化图表中显示“无可用图片”图片。显示图片将根据用户在最终信息中心内选择的过滤条件值而变化：

将探索结果以平铺形式保存到信息中心。

第 3 步：添加信息中心过滤条件并进行润饰

现在，您需要向信息中心添加信息中心过滤条件。信息中心上的过滤条件会更新探索中的过滤条件，以根据用户选择更改显示的图片。

在信息中心的编辑模式下，创建过滤条件：

  • 打开“添加过滤条件”窗口
  • 选择要作为过滤条件的字段。过滤字段应为图片维度所基于的维度。在此示例中，过滤条件的字段将为 state。
  • 在要更新的图块标签页上，选择第 2 步中的图片图块。
  • 在内嵌的过滤字段下拉菜单中，选择原始维度（在本例中为州）。
    • 根据需要选择要更新的其他图块。
  • 根据需要自定义过滤条件。如果您选择高级 控制选项，请务必取消选中允许多个过滤条件值选项，该选项会自动为高级控制选项启用。

现在，图片板块会根据用户选择的过滤条件进行更新。

当用户选择按“加利福尼亚州”过滤时，信息中心将显示加利福尼亚州州旗和数据：

当用户选择按“科罗拉多州”过滤时，信息中心将显示科罗拉多州州旗和数据：