折线图组件在组件设置管理模式下有两部分:全局样式设置、数据绑定。
1.全局样式设置
1.1 折线图样式设置
(1)“图表面板”右侧“添加”按钮可同时创建多个折线图。支持在“名称”字段修改折线图的图例名称。
(2)“类型”可选择柱状或折线:若选择柱状,“样式”包含实体、轮廓;若选择“折线”,“样式”包含“实线”、“点线”、“虚线”。“宽度”意为条形柱柱宽或折线线宽,分为细线、中线、粗线。
(3)支持选择柱状图或折线图是否显示数值,以及是否显示网格。
1.2 x轴样式设置
样式设置中支持对各个轴显示样式进行配置。全局样式页面中,点击“默认x轴设置”按钮,进入x轴设置页面。x轴属性设置项如表格所示
属性名称 | 功能描述 |
轴可见性 | x轴是否可见 |
轴颜色 | 设置x轴颜色 |
轴标签可见性 | x轴名称是否可见 |
轴标签 | x轴名称 |
轴标签颜色 | x轴名称字体颜色 |
轴标签字体 | x轴名称字体大小 |
刻度间隔 | x轴刻度值间隔大小 |
刻度间隔可见性 | x轴刻度值是否显示 |
刻度标签颜色 | x轴刻度值字体颜色 |
刻度标签字体 | x轴刻度值字体大小 |
数据类型 | 刻度值的类型 |
自动量程 | 可根据x轴数值范围自动设置刻度最值 |
自动范围宽限 | 开启自动量程,量程范围的大小 |
上限/下限 | x轴刻度最大值/最小值 |
计量单位 | 包含秒、毫秒、米每秒、公里每小时四类单位 |
1.3 y轴样式设置
全局样式页面中,点击“y₁设置”按钮,进入y轴设置页面,支持同时创建多个y轴,y轴属性设置项如表格所示
属性名称 | 功能描述 |
轴可见性 | y轴是否可见 |
轴颜色 | 设置y轴颜色 |
轴标签可见性 | y轴名称是否可见 |
轴标签 | y轴名称 |
轴标签颜色 | y轴名称字体颜色 |
轴标签字体 | y轴名称字体大小 |
刻度间隔 | y轴刻度值间隔大小 |
刻度标签可见性 | y轴刻度值是否可见 |
刻度标签颜色 | y轴刻度值字体颜色 |
刻度标签字体 | y轴刻度值字体大小 |
数据类型 | 刻度值类型 |
自动量程 | 可根据y轴数值范围自动设置刻度最值 |
自动范围宽限 | 开启自动量程,可配置自动刻度最值范围 |
上限/下限 | y轴刻度最值 |
计量单位 | 包含秒、毫秒、米每秒、公里每小时四类单位 |
2.数据绑定
(1)数据绑定页面中,左侧绑定类型选择“数据源绑定”,注意在绑定前需提前创建数据源(连接数据源或数据库数据源),操作详情请见数据源管理。绑定类型下侧选择数据源名称,选中数据源后可在左侧下方查看库中包含的数据信息,“标签”列为字段,“数据类型”列为字段值的数据类型。
(2)支持以sql语句查询指定表名的数据信息。组件具备数据刷新功能,确保显示的数据始终是最新的和准确的,使组件中的数据与服务器的最新更改保持同步。数据刷新方式共有三种,按键时刷新、加载时刷新、间隔刷新。
- 按键时刷新:点击刷新按钮时刷新数据,需要用户手动刷新数据,适用于用户控制何时刷新的情形。
- 加载时刷新:加载组件时刷新数据,适用于数据不具有时效性的情形。
- 间隔刷新:以指定的时间间隔刷新数据,用户可以在“刷新时间”输入秒数。该设置方式可定期自动刷新数据,适用于用户期望数据经常更新的情况。
(3)图表支持以excel或csv格式导出,可设置是否在图表下侧显示导出按钮。
2.1 普通图表
(1)“x轴绑定”从已绑定的数据源中,选择x轴绑定的字段。“图表元素折线-1”从已绑定的数据源中,选择Y轴绑定的字段。
(2)“聚合函数”选择“无”,“图表种类”选择普通图表。
2.2 聚合图表
聚合图表可绘制特定的过滤数据图形,具体操作方法如下:
(1)“x轴绑定”从已绑定的数据源中,选择x轴绑定的字段。“聚合函数”选择“无”,“图表种类”选择聚合图表。
(2)“y轴绑定”从已绑定的数据源中,选择y轴绑定的字段。“筛选字段”中勾选需要过滤出的条件字段,“图表元素折线-1”下拉菜单将显示已勾选的“筛选字段”所在列的所有值。如下图图表显示的为,满足字段level值均为一级的过滤条件下,id为1、2、3的字段count的数值。