当前位置：首页 > news >正文

使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第三十讲)

news 2025/9/17 10:05:13

这一期讲解lvgl中图表控件的基本使用，LVGL 的图表控件 (lv_chart) 是一个专为嵌入式系统设计的强大数据可视化工具，它支持多种图表类型、丰富的交互功能以及高度可定制的样式，能够以低内存占用实现美观的数据展示效果。

图表有四种显示类型：

在这里插入图片描述
折线图（LV_CHART_TYPE_LINE）：将数据点用直线连接，并可在点上绘制标识，适用于展示数据趋势。

柱状图（LV_CHART_TYPE_BAR）：使用不同高度的柱子表示数据大小，适用于比较不同类别的数据。

散点图（LV_CHART_TYPE_SCATTER）：在X/Y坐标系上绘制点，可以观察两个变量之间的关系。

在这里插入图片描述
无显示（LV_CHART_TYPE_NONE）：隐藏所有数据系列，可用于暂时不显示图表的情况。

以下是图表各个坐标轴的分布：
在这里插入图片描述
以下代码是折线图的初始化和数据添加：

//Write codes screen_1
ui->screen_1 = lv_obj_create(NULL);
ui->g_kb_screen_1 = lv_zh_keyboard_create(ui->screen_1, &lv_font_SourceHanSerifSC_Regular_12);
lv_obj_add_event_cb(ui->g_kb_screen_1, kb_event_cb, LV_EVENT_ALL, NULL);
lv_obj_add_flag(ui->g_kb_screen_1, LV_OBJ_FLAG_HIDDEN);
lv_obj_set_style_text_font(ui->g_kb_screen_1, &lv_font_SourceHanSerifSC_Regular_12, LV_PART_MAIN|LV_STATE_DEFAULT);
//480*480像素的正方形屏幕
lv_obj_set_size(ui->screen_1, 480, 480);
//禁用滚动条
lv_obj_set_scrollbar_mode(ui->screen_1, LV_SCROLLBAR_MODE_OFF);

//Write style for screen_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//样式设置
lv_obj_set_style_bg_opa(ui->screen_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write codes screen_1_chart_1

ui->screen_1_chart_1 = lv_chart_create(ui->screen_1);
//折线图
lv_chart_set_type(ui->screen_1_chart_1, LV_CHART_TYPE_LINE);
//3条水平线，5条垂直线
lv_chart_set_div_line_count(ui->screen_1_chart_1, 3, 5);
//5个数据点
lv_chart_set_point_count(ui->screen_1_chart_1, 5);
//y轴范围0~100
lv_chart_set_range(ui->screen_1_chart_1, LV_CHART_AXIS_PRIMARY_Y, 0, 100);
//次y轴范围0~100
lv_chart_set_range(ui->screen_1_chart_1, LV_CHART_AXIS_SECONDARY_Y, 0, 100);
//x轴缩放256倍
lv_chart_set_zoom_x(ui->screen_1_chart_1, 256);
//y轴缩放256倍
lv_chart_set_zoom_y(ui->screen_1_chart_1, 256);
//黑色线条，使用y轴
ui->screen_1_chart_1_0 = lv_chart_add_series(ui->screen_1_chart_1, lv_color_hex(0x000000), LV_CHART_AXIS_PRIMARY_Y);
//设置初始数据
#if LV_USE_FREEMASTER == 0
lv_chart_set_next_value(ui->screen_1_chart_1, ui->screen_1_chart_1_0, 1);
lv_chart_set_next_value(ui->screen_1_chart_1, ui->screen_1_chart_1_0, 20);
lv_chart_set_next_value(ui->screen_1_chart_1, ui->screen_1_chart_1_0, 30);
lv_chart_set_next_value(ui->screen_1_chart_1, ui->screen_1_chart_1_0, 40);
lv_chart_set_next_value(ui->screen_1_chart_1, ui->screen_1_chart_1_0, 5);
#endif
//位置：x=30,y=90
lv_obj_set_pos(ui->screen_1_chart_1, 30, 90);
//尺寸：417*268像素
lv_obj_set_size(ui->screen_1_chart_1, 417, 268);
lv_obj_set_scrollbar_mode(ui->screen_1_chart_1, LV_SCROLLBAR_MODE_OFF);

//Write style for screen_1_chart_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//背景不透明
lv_obj_set_style_bg_opa(ui->screen_1_chart_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//白色背景
lv_obj_set_style_bg_color(ui->screen_1_chart_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1_chart_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
//1像素边框
lv_obj_set_style_border_width(ui->screen_1_chart_1, 1, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_border_opa(ui->screen_1_chart_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//浅灰色边框
lv_obj_set_style_border_color(ui->screen_1_chart_1, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_border_side(ui->screen_1_chart_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);

//直角矩形
lv_obj_set_style_radius(ui->screen_1_chart_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//2像素线宽
lv_obj_set_style_line_width(ui->screen_1_chart_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
//浅灰色线条
lv_obj_set_style_line_color(ui->screen_1_chart_1, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_line_opa(ui->screen_1_chart_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(ui->screen_1_chart_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style for screen_1_chart_1, Part: LV_PART_TICKS, State: LV_STATE_DEFAULT.
//深灰色文字
lv_obj_set_style_text_color(ui->screen_1_chart_1, lv_color_hex(0x151212), LV_PART_TICKS|LV_STATE_DEFAULT);
//montserrat字体
lv_obj_set_style_text_font(ui->screen_1_chart_1, &lv_font_montserratMedium_12, LV_PART_TICKS|LV_STATE_DEFAULT);
lv_obj_set_style_text_opa(ui->screen_1_chart_1, 255, LV_PART_TICKS|LV_STATE_DEFAULT);
//2像素刻度线
lv_obj_set_style_line_width(ui->screen_1_chart_1, 2, LV_PART_TICKS|LV_STATE_DEFAULT);
//深灰色刻度线
lv_obj_set_style_line_color(ui->screen_1_chart_1, lv_color_hex(0xe8e8e8), LV_PART_TICKS|LV_STATE_DEFAULT);
lv_obj_set_style_line_opa(ui->screen_1_chart_1, 255, LV_PART_TICKS|LV_STATE_DEFAULT);

本文章由威三学社出品
对课程感兴趣可以私信联系