使用lvgl9 的 Chart (lv_chart) 控件指南

文章目录

- 前言
- 主体介绍
- - 1. **图表概述**
  - 2. **样式部分**
  - - 样式定义
  - 3. **图表功能**
  - - 图表类型
    - 数据系列
    - 数据修改
    - 更新模式
    - 数据点个数
    - 轴范围
    - 分隔线
    - 光标
  - 4. **事件处理**
  - 5. **完整示例代码**
- 总结

前言

图表是数据可视化的重要工具，lv_chart 是 LittlevGL 提供的一个灵活的控件，用于展示数据点和趋势。它支持多种图表类型（折线图、柱状图、散点图等）以及丰富的交互功能，如滚动、缩放和光标跟踪。本文将详细介绍 lv_chart 的功能、用法及示例代码。

主体介绍

1. 图表概述

lv_chart 支持以下功能：

图表类型：折线图、柱状图、散点图。
双 y 轴：支持左侧和右侧独立的 y 轴。
分隔线：横向和纵向分隔线。
缩放与滚动：可通过容器实现缩放与滚动。
光标：动态显示特定点的坐标。

2. 样式部分

样式定义

LV_PART_MAIN：控制图表背景、分隔线样式，以及内容区的内边距（padding）。对于柱状图，pad_column 控制同一索引的列间距。
LV_PART_ITEMS：控制折线、柱状图的样式，包括线条宽度、颜色、点的半径等。
LV_PART_INDICATOR：用于折线图或散点图中点的样式（小圆点或方块）。
LV_PART_CURSOR：用于设置光标的样式，如颜色、宽度和形状。

3. 图表功能

图表类型

lv_chart 支持以下图表类型：

LV_CHART_TYPE_NONE：不显示任何数据。
LV_CHART_TYPE_LINE：折线图。
LV_CHART_TYPE_BAR：柱状图。
LV_CHART_TYPE_SCATTER：散点图，支持点与点之间连线。

设置图表类型的示例：

lv_chart_set_type(chart, LV_CHART_TYPE_LINE); // 设置为折线图

数据系列

图表可以包含多个数据系列，每个系列独立表示一组数据。添加数据系列的方法：

lv_chart_series_t *ser = lv_chart_add_series(chart, lv_color_blue(), LV_CHART_AXIS_PRIMARY_Y); 
// 创建一个与左侧 y 轴关联的蓝色数据系列

如果需要动态更新数据，可以使用外部数组：

static int32_t data_array[10] = {10, 20, 30, 40, 50, 60, 70, 80, 90, 100};
lv_chart_set_ext_y_array(chart, ser, data_array); // 绑定外部数组到数据系列

数据更新后，调用以下函数刷新图表：

lv_chart_refresh(chart);

数据修改

您可以通过以下几种方式修改数据：

直接设置值：

ser->y_points[3] = 50; // 修改第 4 个点的值为 50
lv_chart_refresh(chart);

按索引设置值：

lv_chart_set_value_by_id(chart, ser, 2, 75); // 修改第 3 个点的值为 75

顺序追加值：

lv_chart_set_next_value(chart, ser, 85); // 将值 85 追加到数据系列中

初始化所有点：

lv_chart_set_all_value(chart, ser, 0); // 初始化所有点为 0

对于散点图，可通过以下方法设置 x 和 y 值：

lv_chart_set_next_value2(chart, ser, 15, 20); // 追加 (15, 20) 点到散点图

更新模式

lv_chart_set_next_value() 支持两种更新模式：

LV_CHART_UPDATE_MODE_SHIFT：将旧数据左移，新增数据添加到右侧。
LV_CHART_UPDATE_MODE_CIRCULAR：循环更新数据，类似于心电图效果。

设置更新模式的示例：

lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_SHIFT);

数据点个数

可以使用以下方法设置每个数据系列的点数量：

lv_chart_set_point_count(chart, 20); // 设置每个数据系列包含 20 个点

注意：外部数组的大小需与点数一致。

轴范围

可以通过以下方法设置 y 轴的范围：

lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100); // 设置左 y 轴范围为 0 到 100

分隔线

设置横向和纵向分隔线的数量：

lv_chart_set_div_line_count(chart, 4, 6); // 设置 4 条水平线和 6 条垂直线

光标

可以为图表添加光标以显示特定点的坐标：

lv_chart_cursor_t *cursor = lv_chart_add_cursor(chart, lv_color_red(), LV_DIR_VER); // 添加红色垂直光标

设置光标位置：

lv_point_t point = {10, 50}; // 光标位置
lv_chart_set_cursor_pos(chart, cursor, &point);

4. 事件处理

当用户点击某个点时，会触发 LV_EVENT_VALUE_CHANGED 事件：

void chart_event_cb(lv_event_t *e) {lv_obj_t *chart = lv_event_get_target(e);int point_id = lv_chart_get_pressed_point(chart); // 获取被点击点的索引printf("Pressed point: %d\n", point_id);
}
lv_obj_add_event_cb(chart, chart_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

5. 完整示例代码

以下示例展示了如何创建一个包含折线图和光标的动态图表：

#include "lvgl.h"void chart_event_cb(lv_event_t *e) {lv_obj_t *chart = lv_event_get_target(e);int point_id = lv_chart_get_pressed_point(chart);if (point_id >= 0) {printf("Pressed point index: %d\n", point_id);}
}void create_chart_demo() {// 创建图表对象lv_obj_t *chart = lv_chart_create(lv_scr_act());lv_obj_set_size(chart, 300, 200);lv_obj_center(chart);// 设置图表类型为折线图lv_chart_set_type(chart, LV_CHART_TYPE_LINE);// 添加数据系列lv_chart_series_t *ser = lv_chart_add_series(chart, lv_color_blue(), LV_CHART_AXIS_PRIMARY_Y);// 初始化数据lv_chart_set_point_count(chart, 10);lv_chart_set_all_value(chart, ser, 50);// 添加光标lv_chart_cursor_t *cursor = lv_chart_add_cursor(chart, lv_color_red(), LV_DIR_VER);// 设置光标位置lv_point_t point = {5, 75};lv_chart_set_cursor_pos(chart, cursor, &point);// 注册事件回调lv_obj_add_event_cb(chart, chart_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}int main() {lv_init();create_chart_demo();while (1) {lv_task_handler();}
}