一、前言
笔者前面的博文中已经跟大家分享过基于 LVGL 指针表盘界面的实现、通过 List 控件进行菜单的设计，接下来继续跟大家分享通过 Chart 控件进行图表的设计。本次分享的内容是基于 LVGL 7.11.0 版本实现的。
二、Chart 控件介绍
- Chart 控件简介
Chart 控件可以进行图表的绘制，主要由背景、水平或垂直分割线、数据线（series）三部分构成，支持折线图和柱形图。本次分享以画折线图为例进行讲解。
- Chart 控件样式
- LV_CHART_PART_BG 为图表的背景属性，使用所有典型的背景属性。
- LV_CHART_PART_SERIES_BG 为图表系列的背景属性。
- LV_CHART_PART_SERIES 为图表系列的属性设置。
以上样式在第三点中结合实际例子讲解。
三、Chart 应用
下面以心率测量折线图为例子，讲解如何通过 Chart 控件绘制折线图。
- 创建 Chart 对象
首先创建一个 Chart 对象，再设置图表大小以及坐标位置。
- 设置 LV_CHART_PART_BG 样式
① 图表的背景设置可以设置图表的背景颜色、边框显示属性、边框颜色等。
② 设置填充值，即设置内边距，为轴文本和刻度线留出显示位置。
代码设置如下图所示：
- 设置 LV_CHART_PART_SERIES_BG 样式
此部分可以设置分割线的属性，这里设置分割线的颜色。
- 设置 LV_CHART_PART_SERIES 样式
此部分可以设置系列的相关属性，包括线条下方区域的整体不透明度，bg_opa 为不透明度设置，可以通过 bg_drag_dir 设置渐变的方向。这里以垂直方向的颜色渐变为例进行展示。
- 图表基本属性设置
图表基本属性设置包括图表类型、数据更新模式、分割线设置、坐标轴设置等。
① 图表类型，这里设置为 LV_CHART_TYPE_LINE，同时显示点和线，如下图所示，可以根据定义去设置。
② 数据更新模式，包括 LV_CHART_UPDATE_MODE_SHIFT（左移旧数据，新数据更新在右边）和 LV_CHART_UPDATE_MODE_CIRCULAR（循环更新数据）。
③ 分割线设置，可以设置水平、垂直分割的格数。
④ 坐标轴范围设置，根据需要设置。
⑤ 坐标轴标签设置，即设置 X、Y 轴需要显示的标签。
⑥ 坐标轴的主、次刻度长度设置，这里不需要进行刻度显示，故都设置为 0。
- 添加数据点显示
这里定义一个数组来添加数据点。
首先设置图表数据点的数量，再设置相关属性，最后通过 lv_chart_add_series() 函数添加数据线，返回的为被添加的数据线对象。
该数据类型中的 points 即为我们需要添加的数据点，如下图所示。
数组的值赋给该数据线对象的 points 后，通过 lv_chart_refresh(obj) 函数更新图表即可。
- 效果展示
完成以上步骤的设置后，即可得到一个简单的折线图，大家可以根据需要添加属性，去设计不同的图表。
需要注意的是，如第三点的 ② 所提到，需要提前设置填充值，为刻度线和轴文本留出显示位置，若未设置，则折线图会布满图表对象，刻度线和文本将无法显示，如下图所示。
四、结语
以上就是基于 LVGL 7.11.0 版本设计简单折线图的内容，感谢阅读。
五、参考文献
1. LVGL 官方手册 https://docs.lvgl.io/7.11/widgets/chart.html2. 正点原子 littleVGL 开发指南
评论