Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了复选框控件(lv_cb)，本节课带大家来学习一下图表控件，是的，这里的图表就是你理解的那个图表，通过图表我们可以很直观的看一些趋势走势，而且也会让你的项目更加优秀！本节课程相对来说稍微有点难，大家一定好好阅读每一行哦~ 那废话少说，先看图！ 一 有图有真相 描点图 
折线图 
柱形图 
区域图 
是不是有很多种风格？大家看到这个控件后有没有想到应用场景呢？暂时没想到没关系，下面我们先来看一下代码！ 二 代码分析 用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加chart_test()函数测试。 05 | chart = lv_chart_create(lv_scr_act(), NULL); |
06 | lv_obj_set_size(chart, 200, 150); |
07 | lv_obj_align(chart, NULL, LV_ALIGN_CENTER, 0, 0); |
08 | lv_chart_set_type(chart, LV_CHART_TYPE_AREA ); |
09 | lv_chart_set_series_opa(chart, LV_OPA_70); |
10 | lv_chart_set_series_width(chart, 4); |
12 | lv_chart_set_range(chart, 0, 100); |
15 | lv_chart_series_t * ser1 = lv_chart_add_series(chart, LV_COLOR_RED); |
16 | lv_chart_series_t * ser2 = lv_chart_add_series(chart, LV_COLOR_GREEN); |
19 | lv_chart_set_next(chart, ser1, 10); |
20 | lv_chart_set_next(chart, ser1, 10); |
21 | lv_chart_set_next(chart, ser1, 10); |
22 | lv_chart_set_next(chart, ser1, 10); |
23 | lv_chart_set_next(chart, ser1, 10); |
24 | lv_chart_set_next(chart, ser1, 10); |
25 | lv_chart_set_next(chart, ser1, 10); |
26 | lv_chart_set_next(chart, ser1, 30); |
27 | lv_chart_set_next(chart, ser1, 70); |
28 | lv_chart_set_next(chart, ser1, 90); |
42 | lv_chart_refresh(chart); |
可以看到，这里的代码还是相对比较多的，不过其实也没有那么复杂，大多数还是在设置每个点的数据而已，那么这里我们先分析几个比较重要的API，首先就是图表类型，上面几幅图中我们展示了好几种图表类型，其实我们通过lv_chart_set_type这个函数就可以很简单的设置我们所要显示的图表类型，那么默认的类型有哪些呢？我们还是来看一下图表类型的枚举结构体： 03 | LV_CHART_TYPE_NONE = 0x00, |
04 | LV_CHART_TYPE_LINE = 0x01, |
05 | LV_CHART_TYPE_COLUMN = 0x02, |
06 | LV_CHART_TYPE_POINT = 0x04, |
07 | LV_CHART_TYPE_VERTICAL_LINE = 0x08, |
08 | LV_CHART_TYPE_AREA = 0x10, |
10 | 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这个函数去增加，其中第二个参数是数据点的颜色，返回值是指向图表序列结构的一个指针结构体，那么这个结构体都有哪些成员呢，我们可以看一下源码： 那么我们可以通过例程的两种方式向图表数据，第一种就是通过lv_chart_set_next函数不断的去填充数据，其中第一个参数是我们的图表对象，然后第二个参数是我们的数据序列对象，第三个参数是我们的数据值，我们还可以用第二种方式去设置我们的图表中的数据，就是直接对结构体成员的每个数据点直接复制，不过最重要的是在我们设置完成数据后，一定要调用lv_chart_refresh这个函数，否则数据是不会刷新显示的！
OK，那么本节课先到这里，关于图表控件还有些不太常用的属性以及API，这里也就不再做介绍，不过相信随着你学习的深入，肯定自己也会摸索出很多方法的，那么我们下节课学习容器控件，我们下节课再见！ |
