LVGL 控件之图表部件（lv_chart）

---

一、图表

1、组成

图表部件由六个部分组成，如下表所示：

组成部分	描述
LV_PART_MAIN	主要设置背景属性和线条(用于分隔线)相关的样式属性
LV_PART_SCROLLBAR	主要设置缩放图表时使用的滚动条
LV_PART_ITEMS	根据图表类型(折线图和条形图)设置 折线图：设置线属性，如宽度、高度、bg_color 和半径 条形图：背景属性
LV_PART_INDICATOR	设置折线图和散点图上的点(小圆或小方)的属性
LV_PART_CURSOR	设置游标，比如它的宽度、高度、bg_color 和半径
LV_PART_TICKS	设置线条和文本样式属性用于设置刻度的样式

lv_obj_t *chart = lv_chart_create(lv_scr_act());

lv_obj_center(chart);

• LV_CHART_AXIS_PRIMARY_Y: 左轴
• LV_CHART_AXIS_SECONDARY_Y: 右轴
• LV_CHART_AXIS_PRIMARY_X: 下轴
• LV_CHART_AXIS_SECONDARY_X: 上轴

这些属性在后面添加数据的时候会用到。

2、类型

图表的类型分为两种，这两种类型分为折线图和条形图，这些图表的类型是由函数 lv_chart_set_type 设置，该函数可设置四种模式，这些模式如下表所示：

模式	描述
LV_CHART_TYPE_NONE	隐藏数据显示
LV_CHART_TYPE_LINE	点与点连接成线(折线图)
LV_CHART_TYPE_BAR	条形图
LV_CHART_TYPE_SCATTER	X/Y 图画点和点之间的线

上表的模式主要配置图表数据绘画类型，一般常用的模式是 LV_CHART_TYPE_LINE 和 LV_CHART_TYPE_BAR。下面我们使用一个示意图来描述这两种模式的图表，如下图所示：

3、显示数据

在不同类型的图表中，数据序列的表示方式各不相同：

1. 条形图：数据序列由一系列具有相同填充（颜色或纹理）的条形表示。
2. 折线图（也称为图形）：数据序列用单线表示。

图表的数据序列可调用函数 lv_chart_add_series(chart, color, axis) 添加，其中 axis 就是在第一小节中提到的四个属性之一，表示数据缩放方向。

默认情况下，图表部件只支持 10 个数据点。面我们分别地讲解五种添加数据的过程。

3.1 lv_chart_set_ext_y_array/lv_chart_set_ext_x_array

函数 lv_chart_set_ext_y_array 是为 Y 轴数据点设置一个外部阵列，该函数一般用在折线图和条形图类型。函数 lv_chart_set_ext_x_array 是为 X 轴数据点设置一个外部阵列，该函数一般用在 LV_CHART_TYPE_SCATTER 类型上。

例：

static const lv_coord_t example_data[] = {
   
    25, 26, 27, 29, 30, 31, 32, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45,
};

void my_gui(void) {
   
    lv_obj_t *chart = lv_chart_create(lv_scr_act());  /* 创建图表部件 */
    lv_obj_set_size(chart, 200, 150