实时曲线组件以时间作为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. 单击页面右上方的预览，预览和调试组件展示的数据和效果。