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*/
}/** 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;OK，那么本节课先到这里，关于图表控件还有些不太常用的属性以及API，这里也就不再做介绍，不过相信随着你学习的深入，肯定自己也会摸索出很多方法的，那么我们下节课学习容器控件，我们下节课再见！ |
