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); //函数类型转换
效果演示