文章目录
前言
图表是数据可视化的重要工具，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：散点图，支持点与点之间连线。
设置图表类型的示例：
c
lv_chart_set_type(chart, LV_CHART_TYPE_LINE); // 设置为折线图数据系列
图表可以包含多个数据系列，每个系列独立表示一组数据。添加数据系列的方法：
c
lv_chart_series_t *ser = lv_chart_add_series(chart, lv_color_blue(), LV_CHART_AXIS_PRIMARY_Y);
// 创建一个与左侧 y 轴关联的蓝色数据系列如果需要动态更新数据，可以使用外部数组：
c
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); // 绑定外部数组到数据系列数据更新后，调用以下函数刷新图表：
c
lv_chart_refresh(chart);数据修改
您可以通过以下几种方式修改数据：
-
直接设置值 ：
cser->y_points[3] = 50; // 修改第 4 个点的值为 50 lv_chart_refresh(chart); -
按索引设置值 ：
clv_chart_set_value_by_id(chart, ser, 2, 75); // 修改第 3 个点的值为 75 -
顺序追加值 ：
clv_chart_set_next_value(chart, ser, 85); // 将值 85 追加到数据系列中 -
初始化所有点 ：
clv_chart_set_all_value(chart, ser, 0); // 初始化所有点为 0
对于散点图，可通过以下方法设置 x 和 y 值：
c
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：循环更新数据，类似于心电图效果。
设置更新模式的示例：
c
lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_SHIFT);数据点个数
可以使用以下方法设置每个数据系列的点数量：
c
lv_chart_set_point_count(chart, 20); // 设置每个数据系列包含 20 个点注意：外部数组的大小需与点数一致。
轴范围
可以通过以下方法设置 y 轴的范围：
c
lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100); // 设置左 y 轴范围为 0 到 100分隔线
设置横向和纵向分隔线的数量：
c
lv_chart_set_div_line_count(chart, 4, 6); // 设置 4 条水平线和 6 条垂直线光标
可以为图表添加光标以显示特定点的坐标：
c
lv_chart_cursor_t *cursor = lv_chart_add_cursor(chart, lv_color_red(), LV_DIR_VER); // 添加红色垂直光标设置光标位置：
c
lv_point_t point = {10, 50}; // 光标位置
lv_chart_set_cursor_pos(chart, cursor, &point);4. 事件处理
当用户点击某个点时，会触发 LV_EVENT_VALUE_CHANGED 事件：
c
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. 完整示例代码
以下示例展示了如何创建一个包含折线图和光标的动态图表：
c
#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();
}
}运行以上代码，您将看到一个动态的折线图，支持光标操作和数据更新。通过点击图表上的点，可以触发事件并获取点的索引。
总结
lv_chart 是 LittlevGL 提供的强大控件，支持多种图表类型和丰富的交互功能。通过本文的介绍，相信您可以快速上手并构建出满足需求的图表组件。