Hi，大家好，欢迎来到STM32之littlevGL课堂，我们在上节课中学习了复选框控件(lv_cb)，本节课带大家来学习一下图表控件，是的，这里的图表就是你理解的那个图表，通过图表我们可以很直观的看一些趋势走势，而且也会让你的项目更加优秀！本节课程相对来说稍微有点难，大家一定好好阅读每一行哦~ 那废话少说，先看图！ 一 有图有真相
上面图片从左到右，依次是折线图、区域图、锚点图，当然其它类型的，这里没有给大家展示，大家可以自己尝试。大家看到这个控件后有没有想到应用场景呢？暂时没想到没关系，下面我们先来看一下代码！ 二 代码分析 static void chart_test(void)
{
/*Create chart1*/
lv_obj_t * chart1;
chart1 = lv_chart_create(lv_scr_act(), NULL);
lv_obj_set_size(chart1, 200, 150);
lv_obj_align(chart1, NULL, LV_ALIGN_CENTER, 0, 0);
lv_chart_set_type(chart1, LV_CHART_TYPE_AREA ); /*Show lines and points too*/
lv_chart_set_series_opa(chart1, LV_OPA_70); /*Opacity of the data series*/
lv_chart_set_series_width(chart1, 4); /*Line width and point radious*/
lv_chart_set_range(chart1, 0, 100);
/*Create chart2*/
lv_obj_t * chart2;
chart2 = lv_chart_create(lv_scr_act(), NULL);
lv_obj_set_size(chart2, 200, 150);
lv_obj_align(chart2, NULL, LV_ALIGN_CENTER, -250, 0);
lv_chart_set_type(chart2, LV_CHART_TYPE_LINE ); /*Show lines and points too*/
lv_chart_set_series_opa(chart2, LV_OPA_70); /*Opacity of the data series*/
lv_chart_set_series_width(chart2, 4); /*Line width and point radious*/
lv_chart_set_range(chart2, 0, 100);
/*Create chart3*/
lv_obj_t * chart3;
chart3 = lv_chart_create(lv_scr_act(), NULL);
lv_obj_set_size(chart3, 200, 150);
lv_obj_align(chart3, NULL, LV_ALIGN_CENTER, 250, 0);
lv_chart_set_type(chart3, LV_CHART_TYPE_POINT ); /*Show lines and points too*/
lv_chart_set_series_opa(chart3, LV_OPA_70); /*Opacity of the data series*/
lv_chart_set_series_width(chart3, 4); /*Line width and point radious*/
lv_chart_set_range(chart3, 0, 100);
/*Add two data series*/
lv_chart_series_t * ser1 = lv_chart_add_series(chart1, LV_COLOR_RED);
lv_chart_series_t * ser2 = lv_chart_add_series(chart1, LV_COLOR_GREEN);
/*Set the next points on 'dl1'*/
lv_chart_set_next(chart1, ser1, 10);
lv_chart_set_next(chart1, ser1, 10);
lv_chart_set_next(chart1, ser1, 10);
lv_chart_set_next(chart1, ser1, 10);
lv_chart_set_next(chart1, ser1, 10);
lv_chart_set_next(chart1, ser1, 10);
lv_chart_set_next(chart1, ser1, 10);
lv_chart_set_next(chart1, ser1, 30);
lv_chart_set_next(chart1, ser1, 70);
lv_chart_set_next(chart1, 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(chart1); /*Required after direct set*/
/*Add two data series*/
lv_chart_series_t * ser3 = lv_chart_add_series(chart2, LV_COLOR_RED);
lv_chart_series_t * ser4 = lv_chart_add_series(chart2, LV_COLOR_GREEN);
/*Set the next points on 'dl1'*/
lv_chart_set_next(chart2, ser3, 10);
lv_chart_set_next(chart2, ser3, 10);
lv_chart_set_next(chart2, ser3, 10);
lv_chart_set_next(chart2, ser3, 10);
lv_chart_set_next(chart2, ser3, 10);
lv_chart_set_next(chart2, ser3, 10);
lv_chart_set_next(chart2, ser3, 10);
lv_chart_set_next(chart2, ser3, 30);
lv_chart_set_next(chart2, ser3, 70);
lv_chart_set_next(chart2, ser3, 90);
/*Directly set points on 'dl2'*/
ser4->points[0] = 90;
ser4->points[1] = 70;
ser4->points[2] = 65;
ser4->points[3] = 65;
ser4->points[4] = 65;
ser4->points[5] = 65;
ser4->points[6] = 65;
ser4->points[7] = 65;
ser4->points[8] = 65;
ser4->points[9] = 65;
lv_chart_refresh(chart2); /*Required after direct set*/
/*Add two data series*/
lv_chart_series_t * ser5 = lv_chart_add_series(chart3, LV_COLOR_RED);
lv_chart_series_t * ser6 = lv_chart_add_series(chart3, LV_COLOR_GREEN);
/*Set the next points on 'dl1'*/
lv_chart_set_next(chart3, ser5, 10);
lv_chart_set_next(chart3, ser5, 10);
lv_chart_set_next(chart3, ser5, 10);
lv_chart_set_next(chart3, ser5, 10);
lv_chart_set_next(chart3, ser5, 10);
lv_chart_set_next(chart3, ser5, 10);
lv_chart_set_next(chart3, ser5, 10);
lv_chart_set_next(chart3, ser5, 30);
lv_chart_set_next(chart3, ser5, 70);
lv_chart_set_next(chart3, ser5, 90);
/*Directly set points on 'dl2'*/
ser6->points[0] = 90;
ser6->points[1] = 70;
ser6->points[2] = 65;
ser6->points[3] = 65;
ser6->points[4] = 65;
ser6->points[5] = 65;
ser6->points[6] = 65;
ser6->points[7] = 65;
ser6->points[8] = 65;
ser6->points[9] = 65;
lv_chart_refresh(chart3); /*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，这里也就不再做介绍，不过相信随着你学习的深入，肯定自己也会摸索出很多方法的，那么我们下节课学习容器控件，我们下节课再见！ |
