LVGL Chart 控件之心率折线图实现

一、前言

        笔者前面的博文中已经跟大家分享过基于 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 官方手册 Chart (lv_chart) — LVGL documentation

        2.  正点原子 littleVGL 开发指南