LVGL chart图表：双线的实时刷新，可用于数据采集

于 2024-07-15 20:14:39 发布
阅读量215 收藏 3
点赞数 6
文章标签： ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69715520/article/details/139070864
版权

琢磨了好久的chart图标终于搞定了，现在做了一个完整的双线刷新分享一下。版本为8.3

这边lvgl的前言知识就不介绍了，只介绍chart图标部分，头文件只需要#include "lvgl"。然后开始创建图表，过程我就不写了，最后有完整的代码。设置图标的大小和位置，适应你的屏幕，我这边用的是480*320的屏幕。

	schart = lv_obj_create(lv_scr_act());
	lv_obj_set_size(schart, 480, 320);
	lv_obj_set_scrollbar_mode(schart, LV_SCROLLBAR_MODE_OFF);   //关闭滚动条


	lv_obj_set_style_bg_opa(schart, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(schart, lv_color_hex(0xE8E8E8), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(schart, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

	chart_init = lv_chart_create(schart);
	lv_chart_set_zoom_x(chart_init, 256);//不进行缩放
	lv_chart_set_zoom_y(chart_init, 256);//
    lv_obj_set_pos(chart_init, 20, -15); //位置
	lv_obj_set_size(chart_init, 400, 290);//大小

接着设定图表内部结构，起始位置与边界的距离，折线图，整个屏幕的点数，创建线条。

//    lv_obj_set_style_pad_all(chart_init, 5, LV_STATE_DEFAULT);      //图表0刻度线与边框的距离
//    lv_obj_set_style_pad_bottom(chart_init, 5, LV_STATE_DEFAULT);   //
//    lv_obj_set_style_pad_top(chart_init, 5, LV_STATE_DEFAULT);      //

	lv_chart_set_type(chart_init, LV_CHART_TYPE_LINE);          //线状图
	lv_obj_set_style_size(chart_init, 0, LV_PART_INDICATOR);    //设置为折线图        默认为点线图

	lv_chart_set_div_line_count(chart_init, 5, 11);     //背景线条，横竖个数
	lv_chart_set_point_count(chart_init, 50);           //整个屏幕绘制的点数
    lv_chart_set_axis_tick(chart_init, LV_CHART_AXIS_PRIMARY_X, 5, 3, 11, 5, true, 40);//底部线范围

	lv_chart_set_range(chart_init, LV_CHART_AXIS_PRIMARY_Y, 0, 100);     //左边线的范围
	lv_chart_set_axis_tick(chart_init, LV_CHART_AXIS_PRIMARY_Y, 5, 3, 5, 5, true, 40);
	lv_chart_set_range(chart_init, LV_CHART_AXIS_SECONDARY_Y, 0, 100);   //右边线的范围
	lv_chart_set_axis_tick(chart_init, LV_CHART_AXIS_SECONDARY_Y, 5, 3, 5, 5, true, 40);
	chart_left= lv_chart_add_series(chart_init, lv_color_hex(0x000000), LV_CHART_AXIS_PRIMARY_Y);       //创建左边线
    chart_right = lv_chart_add_series(chart_init, lv_color_hex(0xff0000), LV_CHART_AXIS_SECONDARY_Y);   //创建右边线

 背景线条就是横竖的个数，具体部件信息请参考其他博主的帖子。再对图表进行样式调整。

最后设置刷新模式，创建回调函数，定时器。PC性能高可以实现每10毫秒的数据刷新，单片机上左移方式的刷新像拉窗帘，建议使用循环刷新。

    lv_obj_add_event_cb(chart_init, draw_label_event_cb_1, LV_EVENT_DRAW_PART_BEGIN, NULL);     //回调函数
    lv_chart_set_update_mode(chart_init,LV_CHART_UPDATE_MODE_CIRCULAR);     //设置循环刷新
    timer = lv_timer_create(add_data, 10, chart_init);        //创建定时器

在回调函数中设置各方向的文字和线条的颜色，上方的没有用到，设置方法一样。

static void draw_label_event_cb_1(lv_event_t* e)  //设置单方向颜色
{
    lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
    if (!lv_obj_draw_part_check_type(dsc, &lv_chart_class, LV_CHART_DRAW_PART_TICK_LABEL)) return;

    if (dsc->id == LV_CHART_AXIS_PRIMARY_Y && dsc->text)        //左
    {
        dsc->label_dsc->color = lv_color_hex(0x000000);
        dsc->line_dsc->color = lv_color_hex(0x000000);
    }
    else if (dsc->id == LV_CHART_AXIS_SECONDARY_Y && dsc->text)//右
    {
        dsc->label_dsc->color = lv_color_hex(0xff0000);
        dsc->line_dsc->color = lv_color_hex(0xff0000);
    }
    else if (dsc->id == LV_CHART_AXIS_PRIMARY_X && dsc->text)  //下
    {
        dsc->label_dsc->color = lv_color_hex(0x00ff00);
        dsc->line_dsc->color = lv_color_hex(0x00ff00);
    }
}

定时器部分刷新模式有两种，循环刷新和一直左移，主程序中设置的是循环刷新，这边调用设置全部数值的函数进行清屏，LVGL 7版本有lv_chart_clear_series函数进行清屏，现在使用的是8.3版本LV_CHART_POINT_NONE就是清屏参数。

数据采集用随机数代替，外部数据采集只需要传参就行。注释掉的代码为自适应范围.

static void add_data(lv_timer_t * t)
{
    lv_obj_t * chart = t->user_data;

    if(temp++==50)          //循环状态下超出屏幕清屏
    {
        lv_chart_set_all_value(chart,chart_left,LV_CHART_POINT_NONE);
        lv_chart_set_all_value(chart,chart_right,LV_CHART_POINT_NONE);temp=0;
    }
//    if(temp++==50)          //先循环，超出屏幕左移
//    {
//        lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_SHIFT);
//    }



    //随机函数，对100取余，只要=>0的数据
    lv_chart_set_next_value(chart, chart_left, lv_rand(0,100)); //数据检测
    lv_chart_set_next_value(chart, chart_right, lv_rand(0,100));//数据检测

//    date_left = lv_rand(0,100);
//    if(date_left>max_left)
//    {
//        max_left = date_left/10*10+10;
//        lv_chart_set_range(chart_init, LV_CHART_AXIS_PRIMARY_Y, 0, max_left);
//    }
//    date_right = lv_rand(0,100);
//    if(date_right>max_right)
//    {
//        max_right = date_right/10*10+10;
//        lv_chart_set_range(chart_init, LV_CHART_AXIS_SECONDARY_Y, 0, max_right);
//    }
//    lv_chart_set_next_value(chart, chart_left, date_left);
//    lv_chart_set_next_value(chart, chart_right, date_right);
}

本人第一次发帖，不太熟悉过程，就勉强这样吧。最后附源码。

#include "lvgl.h"

lv_timer_t * timer;
lv_obj_t *schart;
lv_chart_series_t *chart_init;
lv_chart_series_t *chart_left;
lv_chart_series_t *chart_right;
int temp,max_left=40,max_right=40;
int date,date_left,date_right;
static void draw_label_event_cb_1(lv_event_t* e)  //设置单方向颜色
{
    lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
    if (!lv_obj_draw_part_check_type(dsc, &lv_chart_class, LV_CHART_DRAW_PART_TICK_LABEL)) return;

    if (dsc->id == LV_CHART_AXIS_PRIMARY_Y && dsc->text)        //左
    {
        dsc->label_dsc->color = lv_color_hex(0x000000);
        dsc->line_dsc->color = lv_color_hex(0x000000);
    }
    else if (dsc->id == LV_CHART_AXIS_SECONDARY_Y && dsc->text)//右
    {
        dsc->label_dsc->color = lv_color_hex(0xff0000);
        dsc->line_dsc->color = lv_color_hex(0xff0000);
    }
    else if (dsc->id == LV_CHART_AXIS_PRIMARY_X && dsc->text)  //下
    {
        dsc->label_dsc->color = lv_color_hex(0x00ff00);
        dsc->line_dsc->color = lv_color_hex(0x00ff00);
    }
}

static void add_data(lv_timer_t * t)
{
    lv_obj_t * chart = t->user_data;

    if(temp++==50)          //循环状态下超出屏幕清屏
    {
        lv_chart_set_all_value(chart,chart_left,LV_CHART_POINT_NONE);
        lv_chart_set_all_value(chart,chart_right,LV_CHART_POINT_NONE);temp=0;
    }
//    if(temp++==50)          //先循环，超出屏幕左移
//    {
//        lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_SHIFT);
//    }



    //随机函数，对100取余，只要=>0的数据
    lv_chart_set_next_value(chart, chart_left, lv_rand(0,100)); //数据检测
    lv_chart_set_next_value(chart, chart_right, lv_rand(0,100));//数据检测

//    date_left = lv_rand(0,100);
//    if(date_left>max_left)
//    {
//        max_left = date_left/10*10+10;
//        lv_chart_set_range(chart_init, LV_CHART_AXIS_PRIMARY_Y, 0, max_left);
//    }
//    date_right = lv_rand(0,100);
//    if(date_right>max_right)
//    {
//        max_right = date_right/10*10+10;
//        lv_chart_set_range(chart_init, LV_CHART_AXIS_SECONDARY_Y, 0, max_right);
//    }
//    lv_chart_set_next_value(chart, chart_left, date_left);
//    lv_chart_set_next_value(chart, chart_right, date_right);
}

void double_line_chart()
{

	schart = lv_obj_create(lv_scr_act());
	lv_obj_set_size(schart, 480, 320);
	lv_obj_set_scrollbar_mode(schart, LV_SCROLLBAR_MODE_OFF);   //关闭滚动条


	lv_obj_set_style_bg_opa(schart, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(schart, lv_color_hex(0xE8E8E8), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(schart, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

	chart_init = lv_chart_create(schart);
	lv_chart_set_zoom_x(chart_init, 256);//不进行缩放
	lv_chart_set_zoom_y(chart_init, 256);//
    lv_obj_set_pos(chart_init, 20, -15); //位置
	lv_obj_set_size(chart_init, 400, 290);//大小
//    lv_obj_set_style_pad_all(chart_init, 5, LV_STATE_DEFAULT);      //图表0刻度线与边框的距离
//    lv_obj_set_style_pad_bottom(chart_init, 5, LV_STATE_DEFAULT);   //
//    lv_obj_set_style_pad_top(chart_init, 5, LV_STATE_DEFAULT);      //

	lv_chart_set_type(chart_init, LV_CHART_TYPE_LINE);          //线状图
	lv_obj_set_style_size(chart_init, 0, LV_PART_INDICATOR);    //设置为折线图        默认为点线图

	lv_chart_set_div_line_count(chart_init, 5, 11);     //背景线条，横竖个数
	lv_chart_set_point_count(chart_init, 50);           //一个画面绘制的点数
    lv_chart_set_axis_tick(chart_init, LV_CHART_AXIS_PRIMARY_X, 5, 3, 11, 5, true, 40);//底部线范围

	lv_chart_set_range(chart_init, LV_CHART_AXIS_PRIMARY_Y, 0, 40);     //左边线的范围
	lv_chart_set_axis_tick(chart_init, LV_CHART_AXIS_PRIMARY_Y, 5, 3, 5, 5, true, 40);
	lv_chart_set_range(chart_init, LV_CHART_AXIS_SECONDARY_Y, 0, 40);   //右边线的范围
	lv_chart_set_axis_tick(chart_init, LV_CHART_AXIS_SECONDARY_Y, 5, 3, 5, 5, true, 40);
	chart_left= lv_chart_add_series(chart_init, lv_color_hex(0x000000), LV_CHART_AXIS_PRIMARY_Y);       //创建左边线
    chart_right = lv_chart_add_series(chart_init, lv_color_hex(0xff0000), LV_CHART_AXIS_SECONDARY_Y);   //创建右边线




    //样式创建      主界面
	lv_obj_set_style_bg_opa(chart_init, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(chart_init, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(chart_init, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_width(chart_init, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_opa(chart_init, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_color(chart_init, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_side(chart_init, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(chart_init, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_width(chart_init, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_color(chart_init, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_opa(chart_init, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(chart_init, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

    //样式创建      其他部件
	lv_obj_set_style_text_color(chart_init, lv_color_hex(0x000000), LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(chart_init, &lv_font_montserrat_16, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_text_opa(chart_init, 255, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_width(chart_init, 2, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_color(chart_init, lv_color_hex(0x000000), LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_opa(chart_init, 255, LV_PART_TICKS|LV_STATE_DEFAULT);



    lv_obj_add_event_cb(chart_init, draw_label_event_cb_1, LV_EVENT_DRAW_PART_BEGIN, NULL);     //回调函数
    lv_chart_set_update_mode(chart_init,LV_CHART_UPDATE_MODE_CIRCULAR);     //设置循环刷新
    timer = lv_timer_create(add_data, 1000, chart_init);        //创建定时器
}

YourKyle
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
livechart:可扩展的画布图表，用于实时数据显示
05-04
画布图表，用于显示具有动画效果的动态数据。 特征 轻巧，缩小并压缩后<12k。 可缩放，当容器调整大小时，canvas元素可以自行调整 易于配置，使用和进行样式和其他选项配置。 视网膜支持 安装 与一起安装： $ ...
tui.chart：:bread::bar_chart:用于数据可视化的漂亮图表
02-05
:bread: :chart_increasing: 将数据分散在TOAST UI图表上。 TOAST UI Chart是Beautiful Statistics Data Visualization库。 :package: 配套 当使用Plain JavaScript，React，Vue组件时，TOAST UI Chart的功能可用。...
LVGL：拓展部件——图表 lv_chart
友善啊，朋友的博客
04-01 2503
此控件是用于可视化的基础图形对象。
LVGL 8.2 点击显示CHART上的点数据值
mygod2008ok的专栏
06-04 1963
Show the value of the pressed points
让你的GUI统计更直观？试试 LVGL『Chart图表控件』吧
朝气蓬勃
02-26 9050
一. LVGL GUI图标控件的概念 图表是可视化数据点的基本对象。它们支持折线图（将点与线连接和/或在其上绘制点）和柱形图。 二. LVGL GUI图表小部件和样式 图表的主要部分被称为LV_CHART_PART_BG ，它使用所有典型的背景属性。该文本样式属性确定轴文本的风格和线条属性决定了刻度的风格。 填充值在侧面增加了一些空间，因此使序列区域更小。 填充也可用于为轴文本和刻度线留出空间。 组合的背景称为 LV_CHART_PART_SERIES_BG ，并放置在主要背景上。在此部分上绘制了分.
LVGL 8.2.0 CHART显示ECG数据
mygod2008ok的专栏
06-04 3283
CHART显示ECG数据
lvgl chart
chenliang0224的专栏
01-08 4413
6.1 创建一个图表对象 6.2 设置图表的大小 6.3 设置图表的对齐位置 6.4 设置图表的区域(LV_CHART_TYPE_AREA是线显示的区域，LV_CHART_TYPE_LINE表示单纯的线) 6.5 设置图表的透明度 6.6 设置数据系列的线宽或点半径（线的粗细） 6.7 设置最大或最小的Y值 6.8 设置每条数据线所具有的数据点个数,如果不设置的话,则默认值是 10 6.9 设置水平和垂直分割线 6.10 设置 y 轴的数值范围,[0,100]也是默认值 6.11 设置 y 轴的主刻度线长度
合宙Air724UG LuatOS-Air LVGL API控件--图表 (Chart)
l531798151的博客
08-31 1852
axis lvgl.CHART_AXIS_PRIMARY_Y 或 lvgl.CHART_AXIS_SECONDARY_Y。axis lvgl.CHART_AXIS_PRIMARY_Y 或 lvgl.CHART_AXIS_SECONDARY_Y。返回 lvgl.CHART_AXIS_PRIMARY_Y 或 lvgl.CHART_AXIS_SECONDARY_Y。调用 lvgl.chart_set_x_start_point(chart, ser, id)可以通过点 id 单独设置某个点的数值。
ESP32 开发笔记(四）LVGL控件学习 Chart 图表控件
cnicfhnui的博客
12-03 9028
先看效果，创建三个不同风格的图表控件来了解图表控件的使用 此文章为盖楼文章，为组织目录链接用，未写教程，教程更新后会删除此行 开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674 一、开发板简介 二、开发环境搭建 windows ESP32例程为C语言开发，并非Python/Arduino/AT指令开发，基于ESP-IDF_V4.2框架库
Qt：QtCharts绘制图表实时采集温度
Vying_king的博客
04-19 2572
自从 Qt 发布以来，给广大跨平台界面研发人员带来了无数的福利。但是Qt自己却一直没有提供自带的图表库，这就使得 QWT、QCustomPlot 等第三方图表库有了巨大的生存空间，为了降低开发成本，大家都涌向了这些第三方库。这种情况一直持续到 Qt5.7 版本后 Qt Charts 的发布。Qt Charts 是 Qt 自带的组件库，包含折线、曲线、饼图、棒图、散点图、雷达图等等各种常用的图表。协议的约束：GPLV3。不论是曲线、饼图、棒图还是其他图表，其中展示的内容本质都是数据。
C#中如何使用Chart图表
热门推荐
狂奔的兔子
01-28 1万+
Chart控件可以用来绘制波形图、柱状图、饼图、折线图等，用来进行数据表现是很不错的，现在简单说一下这个控件的使用方法 效果图 我们首先要加载Chart控件， 然后打开控件的属性窗口 在这个窗口里面我们可以修改曲线的名称，名称在【数据》Name】里面修改 讲一下属性窗口里面我们用到的几个选项的作用吧 数据 XValueType是X轴的数据类型，Y同理，这里我们选Time，可以随时间改变 图表 ChartType是图表的类型，我们可以选出我们想要用的类型，这里选曲线 外观 C
chart.js基本知识——调整图表尺寸
gc_2299的博客
08-26 5922
介绍调整chart.js图表尺寸的几种方式
TOAST UI Chart - :bread::honey_pot:用于数据可视化强大漂亮图表-javascript
06-21
TOAST UI Chart - :bread::honey_pot:用于数据可视化强大漂亮图表 :bread: :chart_increasing: 在 TOAST UI 图表上传播您的数据。 TOAST UI Chart 是漂亮的统计数据可视化库 包装器 toast-ui.vue-chart：Vue 包装器...
Dynamic-Data-Chart.zip_VB图表_chart_vb 数据采集_vb 图表_图表
09-19
总的来说，这个VB项目提供了一个实用的例子，展示了如何利用VB的强大功能来创建交互式、动态的图表，这对于任何需要实时数据可视化的应用程序都是极其有价值的。通过学习和实践这个项目，开发者可以提升在VB中创建...
chart:画布上的基本图表:bar_chart:
04-19
图表画布上的图表。用法安装项目git clone https://github.com/yurimikushov/chart.gitcd chartnpm i在localhost:1234上以development模式运行应用程序npm run start用于构建应用程序production到build的文件夹npm ...
UI物体左右匀速运动
最新发布
u011146831的博客
07-15 150
else。
国外UI设计赏析—汽车行业
07-12 193
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发。
【PyQt】
江苏学蠡信息科技有限公司是一家国家高新技术企业，与众多高校深入开展产学研合作，有一支以硕博士为主导的研发和服务团队，获得自主知识产权十余项。围绕中国高等教育人工智能及物联网专业发展规划，创新性的推出人工智能类、物联网类、嵌入式类三大学科教学产品与培训服务。
07-11 393
通过QtDesigner创建如下图所示的界面ui，并用UIC工具转成对应的py文件。案例一代码通过线程实现点击按钮向线程传输地址，程序等待20秒后，返回结果。通过QtDesigner创建如下图所示的界面ui。案例二通过线程实现用按钮控制进度条。
【区分vue2和vue3下的element UI Carousel 走马灯组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-12 969
在 Vue 2 中，我们通常使用 Element UI，而在 Vue 3 中，我们则使用 Element Plus 作为其替代品。对于 Carousel 走马灯组件，这两个库提供了相似的功能，但在 Vue 2 和 Vue 3 的上下文中，它们的属性、事件和方法可能会有所不同。以下将分别介绍 Vue 2 下的 Element UI Carousel 和 Vue 3 下的 Element Plus Carousel 的属性、事件和方法，并给出示例。属性（Props）height: 走马灯的高度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值