折线图组件

折线图组件在组件设置管理模式下有两部分:全局样式设置、数据绑定。

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的数值。
2024-06-25
0