位於\lvgl-release-v8.0\examples\widgets\chart下的lv_example_chart_2.c，這個例子非常有價值。
我在它基礎之上，畫出了一個三角波形，所有的更改只為測試一下效果，搞明白它們的原理。
其主要關鍵函數是：
lv_obj_add_event_cb(chart1, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);// cahrt創建一個事件draw_event, lv_timer_create(add_data, 40, NULL); // 以毫秒為單位的周期調用，周期ADD—DATA數據
其過程原理是：chart1圖表對像，在有數據更新時，會調用draw_event_cb函數，draw_event_cb函數
實現了所有的細節，內部主要是利用lv_draw xx這類功能進行操作。
所謂的數據更新其實就是add_data回調函數，這里按排了具體的數據更新，而lv_timer_create周期性
執行add_data函數，所以整個套路就打通了。
更改后的測試例程：
1 static lv_obj_t * chart1; 2 static lv_chart_series_t * ser1; 3 4 // 事件回調函數，利用lv_draw xx進行實現，這是重點！ 5 static void draw_event_cb(lv_event_t * e) 6 { 7 lv_obj_t * obj = lv_event_get_target(e); 8 9 /*Add the faded area before the lines are drawn*/ 10 lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e); 11 if(dsc->part == LV_PART_ITEMS) { 12 if(!dsc->p1 || !dsc->p2) return; 13 14 /*Add a line mask that keeps the area below the line*/ 15 lv_draw_mask_line_param_t line_mask_param; 16 lv_draw_mask_line_points_init(&line_mask_param, dsc->p1->x, dsc->p1->y, dsc->p2->x, dsc->p2->y, LV_DRAW_MASK_LINE_SIDE_BOTTOM); 17 int16_t line_mask_id = lv_draw_mask_add(&line_mask_param, NULL); 18 19 /*Add a fade effect: transparent bottom covering top*/ 20 lv_coord_t h = lv_obj_get_height(obj); 21 lv_draw_mask_fade_param_t fade_mask_param; 22 lv_draw_mask_fade_init(&fade_mask_param, &obj->coords, LV_OPA_COVER, obj->coords.y1 + h / 8, LV_OPA_TRANSP,obj->coords.y2); 23 int16_t fade_mask_id = lv_draw_mask_add(&fade_mask_param, NULL); 24 25 /*Draw a rectangle that will be affected by the mask*/ 26 lv_draw_rect_dsc_t draw_rect_dsc; 27 lv_draw_rect_dsc_init(&draw_rect_dsc); 28 draw_rect_dsc.bg_opa = LV_OPA_20; 29 draw_rect_dsc.bg_color = dsc->line_dsc->color; 30 31 lv_area_t a; 32 a.x1 = dsc->p1->x; 33 a.x2 = dsc->p2->x - 1; 34 a.y1 = LV_MIN(dsc->p1->y, dsc->p2->y); 35 a.y2 = obj->coords.y2; 36 lv_draw_rect(&a, dsc->clip_area, &draw_rect_dsc); 37 38 /*Remove the masks*/ 39 lv_draw_mask_remove_id(line_mask_id); 40 lv_draw_mask_remove_id(fade_mask_id); 41 } 42 /*Hook the division lines too*/ 43 else if(dsc->part == LV_PART_MAIN) { 44 if(dsc->line_dsc == NULL) return; 45 46 /*Vertical line*/ 47 if(dsc->p1->x == dsc->p2->x) { 48 dsc->line_dsc->color = lv_palette_lighten(LV_PALETTE_GREY, 1); 49 if(dsc->id == 3) { 50 dsc->line_dsc->width = 2; 51 dsc->line_dsc->dash_gap = 0; 52 dsc->line_dsc->dash_width = 0; 53 } 54 else { 55 dsc->line_dsc->width = 1; 56 dsc->line_dsc->dash_gap = 6; 57 dsc->line_dsc->dash_width = 6; 58 } 59 } 60 /*Horizontal line*/ 61 else { 62 if(dsc->id == 2) { 63 dsc->line_dsc->width = 2; 64 dsc->line_dsc->dash_gap = 0; 65 dsc->line_dsc->dash_width = 0; 66 } 67 else { 68 dsc->line_dsc->width = 2; 69 dsc->line_dsc->dash_gap = 6; 70 dsc->line_dsc->dash_width = 6; 71 } 72 73 if(dsc->id == 1 || dsc->id == 3) { 74 dsc->line_dsc->color = lv_palette_main(LV_PALETTE_GREEN); 75 } else { 76 dsc->line_dsc->color = lv_palette_lighten(LV_PALETTE_GREY, 1); 77 } 78 } 79 } 80 } 81 82 static void add_data(lv_timer_t * timer) 83 { 84 LV_UNUSED(timer); 85 static uint32_t cnt = 30; 86 static uint8_t cn = 1; 87 88 lv_chart_set_next_value(chart1, ser1, cnt); 89 if(cn) // 三角波數據 90 { 91 cnt++; 92 if(cnt>70)cn=0; 93 } 94 else 95 { 96 cnt--; 97 if(cnt==30)cn=1; 98 } 99 } 100 101 /* 102 * chrt圖表例子 103 */ 104 void lv_example_chart_2(void) 105 { 106 /*創建一個圖表CHART*/ 107 chart1 = lv_chart_create(lv_scr_act()); 108 lv_obj_set_size(chart1, 800, 480); // 大小，像素點 109 lv_obj_center(chart1); //中央對齊 110 lv_chart_set_type(chart1, LV_CHART_TYPE_LINE); /*將點連線*/ 111 lv_chart_set_point_count(chart1, 240); // 240個點連成線，默認是10個 112 113 //lv_chart_set_div_line_count(chart1, 5, 7); // 作用是？？？ 114 115 lv_obj_add_event_cb(chart1, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);// cahrt創建一個事件draw_event, 116 lv_chart_set_update_mode(chart1, LV_CHART_UPDATE_MODE_CIRCULAR); // 循環模式 117 118 /*添加1個數據系列*/ 119 ser1 = lv_chart_add_series(chart1, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y); 120 121 lv_timer_create(add_data, 40, NULL); // 以毫秒為單位的周期調用，周期ADD—DATA數據 122 }
執行效果：
lv_timer_create(add_data, 40, NULL);我是設的40MS動態繪制的，速度相關快，基本上
滿足速度要求。
以后，我們將ADC值繪畫在屏上方便分析和觀察！真舒坦啊~~~如果是數字傳感器信號的話，直接
繪圖就可以了，直觀方便我們調試。加油！！
時間：2021-07-07
線的顆粒感很大，可以使用下面進行設置size大小:
/* 沒有點的數據顯示 */ lv_obj_set_style_size(chart1, // 圖表對像 0, // 點的size大小 LV_PART_INDICATOR);// 指示器
效果如下圖：
時間：2021-07-13
圖形CHART的例使用方法
void lv_example_chart_3(void) { /*建一個圖表*/ lv_obj_t * chart = lv_chart_create(lv_scr_act()); // 建一個圖表 lv_obj_set_size(chart, 480, 272); // 圖表的大小 lv_obj_center(chart); // 以父為參考，居中 lv_chart_set_type(chart, LV_CHART_TYPE_BAR); // 畫列 lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100); //設置軸上的最小和最大 y 值 lv_chart_set_range(chart, LV_CHART_AXIS_SECONDARY_Y, 0, 400); lv_chart_set_point_count(chart, 12); // 設置圖表數據線上的12個點 /* 在 X 中稍微放大 */ lv_chart_set_zoom_x(chart, 512); // 規定參數：256不放大， 512放大一倍 /*添加1個數據系列 */ lv_chart_series_t * ser1 = lv_chart_add_series(chart, lv_palette_lighten(LV_PALETTE_RED, 2), LV_CHART_AXIS_PRIMARY_Y); /* 在“ser1”上設置下一個點 */ lv_chart_set_next_value(chart, ser1, 31); // 手動設置12個點的數值 lv_chart_set_next_value(chart, ser1, 66); lv_chart_set_next_value(chart, ser1, 10); lv_chart_set_next_value(chart, ser1, 89); lv_chart_set_next_value(chart, ser1, 63); lv_chart_set_next_value(chart, ser1, 56); lv_chart_set_next_value(chart, ser1, 32); lv_chart_set_next_value(chart, ser1, 35); lv_chart_set_next_value(chart, ser1, 57); lv_chart_set_next_value(chart, ser1, 85); lv_chart_set_next_value(chart, ser1, 22); lv_chart_set_next_value(chart, ser1, 58); lv_chart_refresh(chart); /* 直接設置后刷新 */ }
關鍵lv_chart_set_zoom_x(chart, XX)放大功能，當為256時，有12個數據例條；當為512時，只有6個數據例條，因為放大了1倍，只夠顯示6個例，
如果觸摸屏功能正常的話，可以左右進行滾動操作。。。
