实时曲线(旧)

更新时间:

实时曲线组件以时间作为X轴,展示单个或多个设备属性的实时或历史数据变化趋势。本文介绍实时曲线组件的详细配置方法。

步骤一:添加组件

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

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

  3. 在画布左侧组件列表上方,输入实时曲线,找到该组件,然后将组件拖拽到中间画布。

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

    实时曲线

步骤二:配置数据源

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

  2. 配置设备数据源参数项。

    数据源配置

    配置项

    说明

    选择数据源

    默认为设备。不支持修改。

    模式

    选择待展示的曲线:

    • 单设备多属性:最多支持15个属性。

    • 多设备单属性:最多支持5个设备。

    产品

    单击选择产品,在选择产品对话框选择目标产品。

    选择产品对话框展示了当前应用所属项目下已导入的产品。 如果没有相应产品,单击对话框左下角的产品管理,前往项目详情的产品页,创建或导入产品。

    设备

    选择待绑定的设备。

    • 指定设备:如果已有真实设备连接到物联网平台,则选择真实设备。如果真实设备未连接到物联网平台,没有上报数据,则需使用设备模拟器功能,在线模拟上报数据进行数据格式验证。具体操作,请参见设备模拟器

    • 动态设备:可选页面变量、组件值、URL参数和来自交互动作四种类型的动态设备。

      • 页面变量:选择在当前应用中,已创建的页面变量作为动态设备来源。创建页面变量具体操作,请参见页面变量管理

      • 组件值:选择当前应用中,已配置的表单组件作为动态设备来源。

      • URL参数:以最终发布页面上的某个参数作为该服务的动态设备。常用于嵌入页面时,由宿主页提供动态参数,如将传入的产品型号作为服务的动态设备。

      • 来自交互动作:最终以交互页签配置的弹窗数据源,作为动态设备来源。详细信息,请参见打开弹窗容器

        重要
        • 仅弹窗组件支持将动态设备选择为来自交互动作

        • 必须在单击配置数据源打开数据源配置弹窗后,设置设备项为动态设备

    • 空设备:若选择为空,可在设备模拟数据框中,输入模拟数据,进行数据格式验证。

    数据项

    默认选择设备历史数据。不支持修改。

    使用属性的历史数据作为数据项,例如,可获取过去7天的温度展示。

    属性

    选择设备属性。该组件支持以下类型的设备属性:单精度数字,双精度数字,整数。

    实时数据时间段

    支持以下两种选择:

    • 某个时间点至现在:可选时间点为1小时、0.5天、1天、2天、3天、4天、5天、6天、7天、15天和自定义(可选8天、9天、10天、11天、12天、13天、14天)。

    • 当天0点-24点

    时间单位

    选择时间单位,即以某个时间段为一个单位。实时数据时间段不同,可选时间单位不同:

    • 1小时至现在0.5天至现在1天至现在当天0点-24点时,可选:5分钟、10分钟、1小时。

    • 2天至现在3天至现在时,可选30分钟、1小时。

    • 其他时间段,可选:6小时、1天。

  3. 单击确定

    组件默认展示所配数据源的实时数据曲线。

步骤三:配置样式

  1. 在Web应用编辑器右侧样式中,完成组件展示的配置。

    配置项

    说明

    时间选择器

    选中对应复选框,支持筛查历史数据。组件左上角显示可筛选的查询项。

    全局样式

    设置实时曲线的全局字体、轴颜色和背景颜色。

    X轴

    直接选中显示轴标签复选框,即为显示X、Y轴刻度值。您也可通过配置数据源设备接口静态数据应用推送,通过返回的布尔值设置是(True)否(False)显示X、Y轴刻度值。

    显示轴刻度值后,可设置显示样式。

    说明

    Y轴刻度数量从最小值所在刻度算起,例如最小值为0,最大值为500,间隔为50,刻度数量为11。

    Y轴

    边框

    设置是否显示边框,及可显示的效果。

    辅助线1

    默认不显示辅助线。打开辅助线开关后,会在实时曲线中显示辅助线,并可设置辅助线的显示样式。

    辅助线2

    是否显示系列名称

    默认选中该复选框,在实时曲线上方显示系列名称。支持添加系列,并设置各系列的名称和对应曲线显示颜色。

    说明

    您可在预览页,单击实时曲线上方显示的系列名称,隐藏对应的曲线。

  2. 调整组件在页面中的最终位置。有关组件通用样式配置的更多信息,请参见样式配置

步骤四:配置交互动作

  1. 在Web应用编辑器右侧交互中,单击新增交互,设置事件动作

    该组件支持鼠标移入事件。例如,鼠标移入,执行动作展示隐藏,显示某个隐藏的组件,展示组件数据更多的说明信息。

    具体操作,请参见交互配置

  2. 单击页面右上方的预览,预览和调试组件展示的数据和样式。