时间状态图

更新时间: 2021-06-18 16:12:08

时间状态图是一种条形图组件,通过分割后的矩形条,显示大类目下的细分类目占比情况,可以展示更多维度的数据。本文介绍时间状态图的详细配置方法。

应用示例

如下图所示,展示了某工厂设备在时间段内的状态。

时间状态图

步骤一:添加组件

  1. 创建移动应用。具体操作,请参见创建移动应用

  2. 在移动应用编辑器中,单击最左侧的组件图标组件

  3. (可选)添加分栏组件,进行应用页面布局设置。具体操作,请参见横向分栏和纵向分栏

  4. 在画布左侧组件列表上方,在搜索框中输入时间状态图,找到该组件,然后将组件拖拽到中间画布。

    有关添加组件的更多信息,请参见添加组件

    时间状态图

步骤二:配置数据源

  1. 在移动应用编辑器右侧样式中,单击展示数据后的配置数据源

  2. 数据源配置页面,选择数据源类型,完成配置。

    可选数据源类型有接口数据表资源静态数据应用推送

  3. 单击确定,完成配置。

    数据展示页签左侧数据源显示已配置的数据源名称,维度度量显示从数据源中自动解析的属性字段。

    说明

    数据源属性字段匹配规则:

    • 维度:布尔型、字符型、时间型字段。

    • 度量:数值型字段。

  4. (可选)单击左上角数据表,查看已配置数据源的所有数据信息。

步骤三:配置数据展示

数据展示页签,设置时间状态图展示数据和样式,如图所示。

数据展示
  1. 根据实际需求,分别拖拽一个维度字段到类目,一个维度字段到状态,一个维度字段或一个度量字段到起始时间,一个维度字段或一个度量字段到结束时间

    说明

    系统默认颜色请在数据展示页面右侧属性页签或样式页签下进行修改。

  2. (可选)在类目状态起始时间结束时间,单击字段三角入口,执行以下操作。

    操作项

    操作项

    说明

    汇总方式

    可选:总和(默认值)、平均值、最大值、最小值、计数。

    仅度量字段支持该功能。字段前会显示已设置的汇总方式。

    设置度量字段汇总方式后,支持再次配置过滤筛选条件,展示特定数据。

    说明

    只有当组件数据源类型为数据表资源时,才支持该功能。

    筛选器

    添加字段到筛选器,作为筛选项根据该字段配置条件过滤展示数据。最多支持添加10个筛选器。 您也可从左侧维度或度量中,单击字段三角入口,添加字段到筛选器

    说明

    只有当组件数据源类型为数据表资源时,才支持该功能。 更多信息,请参见筛选器配置

    设置显示名

    编辑字段的显示名称。

  3. 数据展示页签右侧,单击样式,设置组件展示样式。

    配置项

    说明

    全局配置

    设置时间范围类型、基础状态颜色、基础状态名字、每秒宽度和字体。

    标题

    设置是否显示标题,如果显示,则可设置相应的显示效果。

    图例

    设置字号、颜色和粗细。

    时间轴

    设置字号、颜色、粗细、轴颜色和样式。

    类目轴

    设置字号、颜色和粗细。

    基础状态总时长

    设置是否显示对应配置项,如果显示,则可设置相应的显示效果。

    背景

    边框

  4. 单击完成配置,返回移动应用编辑器,查看已配置的组件数据。

步骤四:配置样式

  1. 调整组件宽高和在页面中的布局位置。具体操作,请参见通用样式

  2. 预览和调试组件展示的数据和效果。具体操作,请参见预览与调试

阿里云首页 物联网应用开发 相关技术圈