用例开发WorkshopVisualization widgets指标卡片

注意:以下翻译的准确性尚未经过验证。这是使用 AIP ↗ 从原始英文文本进行的机器翻译。

指标卡片

指标卡片微件在可配置的卡片样式界面中显示Workshop变量值。通常,指标卡片用于在Workshop模块中突出显示关键数据。模块搭建者配置指标卡片微件时可以:

  • 一起显示一组指标。
  • 使用条件格式化来引起对指标的注意,帮助用户解释指标值。
  • 设计指标的布局,使其显示为卡片、标签或列表。
  • 显示时间序列数据,包括显示时间序列历史的迷你图。

下面的截图展示了如何在Workshop模块中使用指标卡片微件显示不同国家的COVID-19疫苗推广统计数据。接下来的示例也会使用这个例子。

metric_card_vaccine_doses_usa_card.png

配置选项

下图显示了未配置的指标卡片微件的初始状态,接下来是配置为显示COVID-19疫苗推广指标的微件状态。

首先,我们将介绍微件的配置选项,其中包含一组指标,如箭头右侧的第一个屏幕所示。然后我们将描述每个单独指标的配置选项,如箭头右侧的第二个屏幕所示。

metric_card_configuration_example.png

微件配置

对于指标卡片微件,核心配置选项如下:

  • 标签
    • 为指标卡片微件设置一个非必填标签。此文本显示在微件顶部。
  • 指标
    • 添加指标按钮向指标卡片微件添加一个新指标。
    • 列表中指标的上下方向箭头更改微件中各个指标显示的顺序。
  • 选择设计样式
    • 卡片
      • 在微件中将指标显示为卡片,如上例和下面的截图所示。请注意,时间序列可视化仅支持这种设计样式。 metric_card_vaccine_doses_usa_card.png
      • 卡片设计样式还允许用户选择:
        • 卡片排列的方向:水平或垂直。
        • 用于排列每张卡片数据的模板:堆叠或并排。
    • 标签
      • 在微件中将指标显示为标签,如下面的截图所示。 metric_card_vaccine_doses_usa_tags.png
      • 标签设计样式允许用户选择卡片排列的方向:水平或垂直。
    • 列表
      • 在微件中将指标显示为列表,如下面的截图所示。 metric_card_vaccine_doses_usa_list.png
      • 列表设计样式允许用户选择用于排列每张卡片数据的模板:堆叠或并排。
  • 选择指标大小
    • 设置微件中每个指标的显示大小。选项有紧凑常规

指标配置

每个单独指标可以使用以下选项进行配置:

  • 标签
    • 为指标设置一个非必填标签。此文本显示在单个指标的顶部。
  • 描述
    • 为指标设置非必填描述文本。当用户将鼠标悬停在i提示上时,此描述文本作为工具提示显示,如下图所示。

metric_card_description.png

  • 值类型
    • 指定要显示的值是字符串还是数字。
    • 本节还配置以下选项:
      • **值:**用于填充指标的值必须由相应类型的Workshop变量支持。因此,如果值类型设置为字符串,用户必须选择一个字符串变量来填充指标。同样,如果值类型设置为数字,用户必须选择一个数值变量。有关Workshop变量的更多信息,请参阅变量
      • **数值格式化:**此非必填配置仅适用于数字值类型。用户可以指定一个值格式化方案来显示变量的数值。有关值格式化的更多信息,请参阅在Workshop中的格式化
      • **条件格式化:**此非必填配置允许用户应用基于规则的格式化来显示指标值,如下面的示例所示,当值小于或等于零时显示为红色,否则显示为绿色。有关更多信息,请参阅在Workshop中的格式化

metric_card_conditional_formatting.png

  • **显示次级指标?**一个非必填配置,用于在同一指标显示中显示第二个指标,在主指标下方。将此切换设置为会打开次级指标的值类型配置,类似于主指标的配置。
  • **显示可视化?**一个非必填配置,用于显示描绘时间序列历史的迷你图。将此切换设置为会打开配置屏幕,其中包括以下选项:
    • **位置:**指定迷你图是显示为并排(并列)还是与指标值堆叠(上下)。

    • **时间序列集:**要可视化的时间序列。使用时间序列集变量指定,如下面的截图所示。有关Workshop变量(包括时间序列集变量)的更多信息,请参阅变量time_series_set_variable.png

    • **时间范围:**指定要显示数据的时间范围。预设选项包括所有时间最后一小时最后一天最后一周,但选择自定义范围会打开详细范围选择器,您可以指定精确相对范围。有关指定时间范围的更多信息,请参阅Workshop中的时间序列属性

    • **基线:**当此参数开启时,会与迷你图一起渲染基线以帮助视觉解释趋势。有关指定基线的更多信息,请参阅Workshop中的时间序列属性