实时曲线组件以时间作为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天。
    • 当天0点-24点 。
    时间单位 选择时间单位，即以某个时间段为一个单位，可选：5分钟、10分钟、1小时。
  3. 单击 确定 。
    组件默认展示所配数据源的实时数据曲线。

步骤三：配置样式

  1. 在Web应用编辑器右侧 样式 中，完成组件展示的配置。
    配置项 说明
    时间选择器 选中对应复选框，支持筛查历史数据。组件左上角显示可筛选的查询项。
    全局样式 设置实时曲线的全局字体、轴颜色和背景颜色。
    X轴 选中 显示轴标签 复选框后，显示X、Y轴刻度值。 可设置显示样式。
    说明 Y轴刻度数量从最小值所在刻度算起，例如最小值为0，最大值为500，间隔为50，刻度数量为11。
    Y轴
    边框 设置是否显示边框，及可显示的效果。
    辅助线1 默认不显示辅助线。打开辅助线开关后，会在实时曲线中显示辅助线，并可设置辅助线的显示样式。
    辅助线2
    是否显示系列名称 默认选中该复选框，在实时曲线上方显示系列名称。支持添加系列，并设置各系列的名称和对应曲线显示颜色。
    说明 您可在预览页，单击实时曲线上方显示的系列名称，隐藏对应的曲线。
  2. 调整组件在页面中的最终位置。有关组件通用样式配置的更多信息，请参见 样式配置 。

步骤四：配置交互动作

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

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

    具体操作，请参见 交互配置 。

  2. 单击页面右上方的 预览 ，预览和调试组件展示的数据和效果。