立即注册 找回密码

微雪课堂

搜索

树莓派littlevGL系列教程:图表控件(lv_chart)

2019-12-1 18:43| 发布者: imliubo| 查看: 1739| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到树莓派之littlevGL课堂,我们在上节课中学习了复选框控件(lv_cb),本节课带大家来学习一下图表控件,是的,这里的图表就是你理解的那个图表,通过图表我们可以很直观的看一些趋势走势,而且也会 ...
Hi,大家好,欢迎来到树莓派之littlevGL课堂,我们在上节课中学习了复选框控件(lv_cb),本节课带大家来学习一下图表控件,是的,这里的图表就是你理解的那个图表,通过图表我们可以很直观的看一些趋势走势,而且也会让你的项目更加优秀!本节课程相对来说稍微有点难,大家一定好好阅读每一行哦~ 那废话少说,先看图!
一 有图有真相
描点图

折线图

柱形图

区域图

是不是有很多种风格?大家看到这个控件后有没有想到应用场景呢?暂时没想到没关系,下面我们先来看一下代码!
二 代码分析
用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加chart_test()函数测试。
void chart_test(void)
{
    /*Create a chart*/
    lv_obj_t * chart;
    chart = lv_chart_create(lv_scr_act(), NULL);
    lv_obj_set_size(chart, 200, 150);
    lv_obj_align(chart, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_chart_set_type(chart, LV_CHART_TYPE_AREA );   /*Show lines and points too*/
    lv_chart_set_series_opa(chart, LV_OPA_70);       /*Opacity of the data series*/
    lv_chart_set_series_width(chart, 4);            /*Line width and point radious*/

    lv_chart_set_range(chart, 0, 100);

    /*Add two data series*/
    lv_chart_series_t * ser1 = lv_chart_add_series(chart, LV_COLOR_RED);
    lv_chart_series_t * ser2 = lv_chart_add_series(chart, LV_COLOR_GREEN);

    /*Set the next points on 'dl1'*/
    lv_chart_set_next(chart, ser1, 10);
    lv_chart_set_next(chart, ser1, 10);
    lv_chart_set_next(chart, ser1, 10);
    lv_chart_set_next(chart, ser1, 10);
    lv_chart_set_next(chart, ser1, 10);
    lv_chart_set_next(chart, ser1, 10);
    lv_chart_set_next(chart, ser1, 10);
    lv_chart_set_next(chart, ser1, 30);
    lv_chart_set_next(chart, ser1, 70);
    lv_chart_set_next(chart, ser1, 90);

    /*Directly set points on 'dl2'*/
    ser2->points[0] = 90;
    ser2->points[1] = 70;
    ser2->points[2] = 65;
    ser2->points[3] = 65;
    ser2->points[4] = 65;
    ser2->points[5] = 65;
    ser2->points[6] = 65;
    ser2->points[7] = 65;
    ser2->points[8] = 65;
    ser2->points[9] = 65;

    lv_chart_refresh(chart); /*Required after direct set*/
}
可以看到,这里的代码还是相对比较多的,不过其实也没有那么复杂,大多数还是在设置每个点的数据而已,那么这里我们先分析几个比较重要的API,首先就是图表类型,上面几幅图中我们展示了好几种图表类型,其实我们通过lv_chart_set_type这个函数就可以很简单的设置我们所要显示的图表类型,那么默认的类型有哪些呢?我们还是来看一下图表类型的枚举结构体:
/** Chart types*/
enum {
    LV_CHART_TYPE_NONE          = 0x00, /**< 不显示(隐藏)*/
    LV_CHART_TYPE_LINE          = 0x01, /**< 折线*/
    LV_CHART_TYPE_COLUMN        = 0x02, /**< 柱形*/
    LV_CHART_TYPE_POINT         = 0x04, /**< 点*/
    LV_CHART_TYPE_VERTICAL_LINE = 0x08, /**< 竖直线*/
    LV_CHART_TYPE_AREA          = 0x10, /**< 区域*/
};
typedef uint8_t lv_chart_type_t;
没错,默认的图表类型一共有这些,而且图表类型还可以叠加,比如我们想要即画点又连起曲线来,可以这样设置:
lv_chart_set_type(chart, LV_CHART_TYPE_LINE | LV_CHART_TYPE_POINT);
然后是lv_chart_set_series_opa这个函数,其主要作用是设置我们画的点或者柱形的透明度的,取值范围是 0 ~ 255,0的时候是完全透明,255的时候完全不透明,这里的透明与不透明是相对于我们的网格来说的。
再就是lv_chart_set_series_width这个函数,主要是就是设置我们画的点的直径或者线宽等,当然对区域覆盖的图表类型来说是不起作用的。
然后lv_chart_set_range这个函数是设置的数据区间,就是我们纵坐标的最小值和最大值。
设置完上面的这些基本属性后,就是给我们的图表设置数据了,毕竟图表的作用就是用来展示数据的,再填充数据前我们要先增加图表序列,就是那根红线或者绿线,我们通过lv_chart_add_series这个函数去增加,其中第二个参数是数据点的颜色,返回值是指向图表序列结构的一个指针结构体,那么这个结构体都有哪些成员呢,我们可以看一下源码:
typedef struct
{
    lv_coord_t * points;
    lv_color_t color;
    uint16_t start_point;
} lv_chart_series_t;
那么我们可以通过例程的两种方式向图表数据,第一种就是通过lv_chart_set_next函数不断的去填充数据,其中第一个参数是我们的图表对象,然后第二个参数是我们的数据序列对象,第三个参数是我们的数据值,我们还可以用第二种方式去设置我们的图表中的数据,就是直接对结构体成员的每个数据点直接复制,不过最重要的是在我们设置完成数据后,一定要调用lv_chart_refresh这个函数,否则数据是不会刷新显示的!

OK,那么本节课先到这里,关于图表控件还有些不太常用的属性以及API,这里也就不再做介绍,不过相信随着你学习的深入,肯定自己也会摸索出很多方法的,那么我们下节课学习容器控件,我们下节课再见!

81

顶一下

刚表态过的朋友 (81 人)

关键词树莓派 littlevGL

相关阅读

最新评论

Arduino
基础入门
OpenCV
littleGL

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2021-4-13 08:33 , Processed in 0.022066 second(s), 18 queries .

返回顶部