lvgl chart

6.1 创建一个图表对象
6.2 设置图表的大小
6.3 设置图表的对齐位置
6.4 设置图表的区域(LV_CHART_TYPE_AREA是线显示的区域，LV_CHART_TYPE_LINE表示单纯的线)
6.5 设置图表的透明度
6.6 设置数据系列的线宽或点半径（线的粗细）
6.7 设置最大或最小的Y值
6.8 设置每条数据线所具有的数据点个数,如果不设置的话,则默认值是 10
6.9 设置水平和垂直分割线
6.10 设置 y 轴的数值范围,[0,100]也是默认值
6.11 设置 y 轴的主刻度线长度和次刻度线长度
6.12 设置 y 轴的主刻度标题和每个主刻度标题间的刻度数
6.13 设置 x 轴的主刻度线长度和次刻度线长度
6.14 设置 x 轴的主刻度标题和每个主刻度标题间的刻度数
6.15 分配数据系列并将其添加到图表中
6.16 将所有数据右移，并在数据行上设置最右边的数据
6.17 创建一个线程，用于刷新图表

定义一个线程参数结构体

typedef struct {
	lv_obj_t * chart;
	lv_chart_series_t * ser1;
	lv_chart_series_t * ser2;
}TChartObject;

static TChartObject chartObject;

实现图表刷新线程

__declspec (thread)  int  nCount = 0; //线程局部变量
DWORD  WINAPI chart_thread_proc(LPVOID  * wparm)
{
	TChartObject *pTChartObject = (TChartObject*)wparm;
	int iOffset = 0;

	while (1)
	{
		Sleep(500);

		for (int i = 0; i < 10; i++)
		{
			if (i % 2 == 0)
				lv_chart_set_next(pTChartObject->chart, pTChartObject->ser1, 0 + iOffset);
			else
				lv_chart_set_next(pTChartObject->chart, pTChartObject->ser1, 20 + iOffset);
		}

		for (int i = 0; i < 10; i++)
		{
			if (i % 2 == 0)
				lv_chart_set_next(pTChartObject->chart, pTChartObject->ser2, 0 + iOffset);
			else
				lv_chart_set_next(pTChartObject->chart, pTChartObject->ser2, 40 + iOffset);
		}

		iOffset++;
		if (iOffset > 10)
			iOffset = 0;
		lv_chart_refresh(pTChartObject->chart);
	}
	return  0;
}

实现图表配置

	//6. 图表
	//6.1 创建一个图表对象
	lv_obj_t * chart;
	chart = lv_chart_create(lv_scr_act(), NULL);
	//6.2 设置图表的大小
	lv_obj_set_size(chart, 200, 150);
	//6.3 设置图表的对齐位置
	lv_obj_align(chart, NULL, LV_ALIGN_IN_RIGHT_MID, -20, -30);
	//6.4 设置图表的区域(LV_CHART_TYPE_AREA是线显示的区域，LV_CHART_TYPE_LINE表示单纯的线)
	lv_chart_set_type(chart, LV_CHART_TYPE_LINE);   /*Show lines and points too*/
	//6.5 设置图表的透明度
	lv_chart_set_series_opa(chart, LV_OPA_70);       /*Opacity of the data series*/
	//6.6 设置数据系列的线宽或点半径（线的粗细）
	lv_chart_set_series_width(chart, 2);            /*Line width and point radious*/
	//6.7 设置最大或最小的Y值
	lv_chart_set_range(chart, 0, 50);

	//6.9 设置每条数据线所具有的数据点个数,如果不设置的话,则默认值是 10
	lv_chart_set_point_count(chart, 10);
	//6.10 设置水平和垂直分割线
	lv_chart_set_div_line_count(chart, 4, 4);
	//6.11 设置 y 轴的数值范围,[0,100]也是默认值
	lv_chart_set_range(chart, 0, 50);
	//6.12 设置 y 轴的主刻度线长度和次刻度线长度
	lv_chart_set_y_tick_length(chart, 10, 5);
	//6.13 设置 y 轴的主刻度标题和每个主刻度标题间的刻度数
	lv_chart_set_y_tick_texts(chart, "5\n4\n3\n2\n1\n0", 5, LV_CHART_AXIS_DRAW_LAST_TICK);
	//6.14 设置 x 轴的主刻度线长度和次刻度线长度
	lv_chart_set_x_tick_length(chart, 10, 5);
	//6.15 设置 x 轴的主刻度标题和每个主刻度标题间的刻度数
	lv_chart_set_x_tick_texts(chart, "0\n0.2\n0.4\n0.6\n0.8\n1.0", 5, LV_CHART_AXIS_DRAW_LAST_TICK);
	lv_chart_set_margin(chart, 40);//设置刻度区域的高度

	//6.16 分配数据系列并将其添加到图表中
	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_BLUE);

	//6.17 将所有数据右移，并在数据行上设置最右边的数据
	for (int i = 0; i < 10; i++)
	{
		if ((i%2)==0)
			lv_chart_set_next(chart, ser1, 10);
		else
			lv_chart_set_next(chart, ser1, 30);

		if ((i % 2) == 0)
			lv_chart_set_next(chart, ser2, 0);
		else
			lv_chart_set_next(chart, ser2, 30);
	}
	//6.18 如果图表的数据行已更改，请刷新图表
	lv_chart_refresh(chart); 

	//6.19 创建一个线程，用于刷新图表
	chartObject.chart = chart;
	chartObject.ser1 = ser1;
	chartObject.ser2 = ser2;
	HANDLE   handle = CreateThread(NULL, 0, (LPTHREAD_START_ROUTINE)chart_thread_proc, (void*)&chartObject, 0, NULL); //函数类型转换

效果演示

おすすめ