跳到主要内容 跳到补充内容

筛选器窗格示例

本帮助主题提供了多个示例,展示了如何在筛选器窗格中自定义样式和其他属性,以实现多种功能目的。

示例 1 — 紧凑设计

您可以将许多列表框添加到筛选器窗格,从而允许跨多个不同维度细化数据。

为了节省空间并优先显示工作表上的其他可视化,您可以为筛选器窗格提供紧凑设计,其中内容可根据需要展开和折叠。

  1. 创建一个新应用程序,并将 示例加载脚本 粘贴到 数据加载编辑器 中的新部分。然后加载数据。

  2. 切换至工作表视图。在工作表属性中,将 网格间距 设置为 42。

  3. 筛选器窗格拖到表格上。

  4. 单击添加维度。选择 Country

  5. 在属性面板中,单击添加字段。选择 Item Type

  6. 使用 添加字段 按钮,添加其他四个维度作为列表框:

    • Order Year
    • Order Priority

    • Region

    • Sales Channel

  7. 逐个展开您刚刚添加的每个列表框,并将 演示 > 折叠列表框 设置为 始终

  8. 在属性面板中,展开外观 > 演示

  9. 单击调色板 样式

  10. 筛选器窗格选项卡中,设置以下属性:

    • 标题的字体大小:18px

    • 标题的字体颜色:十六进制代码 #ffffff

    • 背景颜色:十六进制代码 #87205d

    • 阴影:小,十六进制代码 #000000

  11. 列表框 选项卡中,设置以下属性:

    • 标题的字体大小:14px

  12. 将筛选器窗格调整为工作表网格上的两乘十空间。

切换到分析模式。您可以根据需要展开列表框以进行选择。

抽屉式筛选器窗格处于折叠状态

分析模式下处于完全折叠状态的筛选器窗格

抽屉式筛选器窗格,维度列表已展开

分析模式下的筛选器窗格,维度列表已展开

示例 2 — 丰富的设计

虽然筛选器窗格主要用于筛选数据,但它也可以用于可视化数据。融入丰富的设计使分析人员能够在进行不同选择时获得见解。

  1. 创建一个新应用程序,并将 示例加载脚本 粘贴到 数据加载编辑器 中的新部分。然后加载数据。

  2. 切换到工作表视图,并将筛选器窗格拖到工作表上。

  3. 单击添加维度。选择 Item Type

  4. 单击Item Type列表框以展开其属性。

  5. 展开显示

  6. 打开直方图设置。

  7. 使用显示频率下拉菜单选择相对频率 (%)

  8. 折叠列表框 设置为 从不

  9. 展开 排序

  10. 排序 设置为 自定义

  11. 清除所有选项并打开 按表达式排序

  12. 选择 降序

  13. 表达式下,输入以下表达式:

    Count([Item Type])
  14. 在属性面板中,展开外观 > 常规

  15. 关闭显示标题

  16. 展开外观 > 显示

  17. 点击 调色板样式

  18. 列表框选项卡中,设置以下属性:

    • 标题

      • 字体:Inter, sans-serif

      • 字号:18px

    • 内容

      • 字体:Inter, sans-serif

  19. 将筛选器窗格调整为小矩形形状,例如,三乘四格。

具有丰富设计的筛选器窗格。筛选器窗格中的项目会显示值分布直方图和相对百分比,并按从高到低的出现次数降序排列。

分析模式下的筛选器窗格,带直方图。

示例 3 — 聚焦设计

筛选器窗格的设计方式取决于您希望用户如何进行选择。例如,您可能希望限制用户使用某些功能,以鼓励他们与数据进行更窄、更集中的交互。

场景包括:

  • 当值一次选择一个,或者选择多个值无法提供任何有意义的洞察时,对特定维度进行筛选会带来最大的洞察。为了以这种方式指导分析,您可以通过使用复选框模式关闭范围选择。

  • 在字段中搜索值要么无法提供洞察,要么不合乎需要。

  • 您希望在筛选数据时最大程度地减少干扰,例如,选择工具条形。

  1. 创建一个新应用程序,并将 示例加载脚本 粘贴到 数据加载编辑器 中的一个新部分中。然后加载数据。

  2. 切换到工作表视图,并将筛选器窗格拖到工作表上。

  3. 单击添加维度。选择 Item Type

  4. 单击 Item Type 列表框以展开其属性。

  5. Search 设置为 Hide

  6. 关闭 显示选择项工具栏

  7. 展开显示

  8. 开启复选框模式

  9. 在属性面板中,展开外观 > 一般

  10. 关闭显示标题

  11. 将筛选器窗格调整为小的矩形形状,例如三乘四格。

聚焦设计的筛选器窗格

分析模式下的筛选器窗格,使用复选框模式。

示例 4 — 网格设计

您可以将网格模式用于使用小型、已定义数据集的筛选器窗格。一个很好的例子是在网格中组织基于时间的维度。

  1. 创建一个新应用程序,并将示例加载脚本粘贴到数据加载编辑器中的新部分。然后加载数据。

  2. 切换到工作表视图,并将筛选器窗格拖到工作表上。

  3. 单击添加维度。选择 Order Year

  4. 单击 Order Year 列表框,展开其属性。

  5. 关闭显示标题

  6. 展开显示

  7. 折叠列表框 设置为 从不

  8. 对于 数据显示方式,选择 网格

  9. 最大可见列数设置为自定义

  10. 最大列数设置为 3。

  11. 在筛选器窗格中添加Order Quarter作为列表框。

  12. 单击Order Quarter列表框以展开其属性。

  13. 关闭显示标题

  14. 展开显示

  15. 折叠列表框 设置为 从不

  16. 对于数据显示方式,选择网格

  17. 排序依据设置为

  18. 最大可见行数设置为自定义

  19. 最大列数设置为 1。

  20. Order Month添加为筛选器窗格中的列表框。

  21. 单击Order Month列表框以展开其属性。

  22. 关闭显示标题

  23. 展开显示

  24. 折叠列表框 设置为 从不

  25. 对于 数据显示方式,选择 网格

  26. 最大可见列数 设置为 自定义

  27. 最大列数 设置为 4。

  28. 在属性面板中,展开 外观 > 常规

  29. 关闭 显示标题

  30. 在属性面板中,展开 外观 > 演示

  31. 单击 调色板样式

  32. 筛选器窗格 选项卡中,设置以下属性:

    • 背景颜色: #83af9b

  33. 列表框选项卡中,设置以下属性:

    • 内容

      • 字体:Fredoka One, fantasy

      • 文本大小:15px

      • 文本大小:粗体

      • 文本颜色:#000000

    • 选择状态 > 可能: #000000

    • 背景颜色: #83af9b

  34. 将筛选器窗格调整到适合显示器的大小,例如三乘三。

带网格设计的筛选器窗格

在分析模式下使用网格模式的筛选器窗格。

进一步增强:带布局容器的复合筛选器窗格

为了进一步提高响应能力和控制力,您可以将上述筛选器窗格创建为嵌入到布局容器中的一系列三个筛选器窗格。下图显示了这可能是什么样子的示例。

嵌入到布局容器中的网格样式筛选器窗格

带有多个网格样式筛选器窗格的布局容器。

示例 5 — 与组织的调色板保持一致

筛选器窗格可以进行样式设置,以符合您组织的调色板。除了定义背景色和文本颜色,您还可以设置筛选器窗格中选择项状态的配色方案。您可能希望选择项显示为贵公司的主品牌颜色,而不是默认的绿色。

通过自定义主题,您可以通过为所有可视化中的选择项和选择工具栏设置颜色,进一步应用您组织的配色方案。有关更多信息,请参阅自定义主题 (仅提供英文版本)

在此示例中,我们创建了一个筛选器窗格,以反映以下品牌颜色:

  • 主色:十六进制代码 #3100ff

  • 辅色:十六进制代码 #9ba7ff

  1. 创建一个新应用程序,并将示例数据粘贴到数据加载编辑器中的新部分。然后加载数据。

  2. 切换到工作表视图,并将筛选器窗格拖到工作表上。

  3. 单击添加维度。选择 Item Type

  4. 在属性面板中,单击添加字段。选择 Order Year

  5. 使用添加字段按钮,添加其他三个维度作为列表框:

    • Order Priority

    • Region

    • Sales Channel

  6. 在属性面板中,展开外观 > 常规

  7. 关闭显示标题

  8. 展开外观 > 显示

  9. 点击 调色板样式

  10. 筛选窗格 选项卡中,设置以下属性:

    • 阴影:小,十六进制代码 #000000

  11. 列表框 选项卡中,设置以下属性:

    • 标题 的字体大小:14px

    • 选择项状态:

      • 已选定: Hex code #3100ff

      • 备选: Hex code #9ba7ff

      • 排除: #bebebe

      • 选定排除: #7b7a78

      • 可能:#ffffff

  12. 调整筛选器窗格的大小,使其呈长方形,位于工作表的一侧—例如,三乘十二个方格。

切换到分析模式。在筛选器窗格中进行选择以查看配色方案。

具有反映品牌颜色的选择项状态的筛选器窗格

筛选窗格,其选择项状态反映品牌颜色

示例加载脚本

本页面有帮助吗?

如果您发现此页面或其内容有任何问题 – 打字错误、遗漏步骤或技术错误 – 请告诉我们!