|  **银杏科技有限公司旗下技术文档发布平台**  ||||
|技术支持电话|**0379-69926675-801**|||
|技术支持邮件|Gingko@vip.163.com|||
^  版本  ^  日期  ^  作者  ^  修改内容  ^
|  V1.0  |  2021-01-05  |  yang  |  初次建立  | 

===== 实验三十三：lv_chart图表 =====

==== 一、图表 ====

图表是可视化数据点的基本对象，它有折线图（线上带点或不带点）和柱状图两种类型，还支持网格线、2个y轴、轴刻度和刻度文本。

图表的主体部分叫做 **LV_CHART_PART_BG** ，它使用所有典型的背景属性。其中**text**样式属性决定轴文本的样式，**line**属性决定刻度的样式，填充值在侧面增加了一些空间，因此会使数据序列区域更小，填充也可用于为轴文本和刻度线留出空间。

数据序列区域的背景称为 **LV_CHART_PART_SERIES_BG** ，并放置在主体背景上。在此部分上绘制了网格线和数据，除典型的背景样式属性外，网格线还使用线型属性。数据序列的样式可以通过 **LV_CHART_PART_SERIES** 引用。

对于柱状图，使用以下属性：
  * **radius** 柱的半径。
  * **padding_inner** 相同 x 坐标的柱间距。
  如果是折线图，则使用以下属性：
  * **line properties** 线属性来描述线。
  * **size** 点的大小半径。
  * **bg_opa** 线条下方区域的整体不透明度。
  * **bg_main_stop** 在顶部的渐变透明度的百分比（0：在顶部透明，255：bg_opa 在顶部不透明）。
  * **bg_grad_stop** 在底部的渐变透明度的百分比（0：底部透明，255：bg_opa 在底部不透明）。
  * **bg_drag_dir**设置为 **LV_GRAD_DIR_VER** 使能通过 **bg_main_stop** 和 **bg_grad_stop** 进行透明度渐变功能。

==== 二、图表数据 ====

=== 2.1、数据序列 ===

通过 **lv_chart_add_series(chart, color)** 可以在图表中添加多条数据序列。如果不使用外部数组，结构体 **lv_chart_series_t**将包含所选颜色和数据点的数组，如果分配了外部数组，则与该序列关联的任何数据点缩占用的内存都将释放，而数据系列将指向外部数组。
 
=== 2.2、数据类型 ===

数据显示类型有以下几种：
  * **LV_CHART_TYPE_NONE** 不显示任何数据，可用于隐藏系列。
  * **LV_CHART_TYPE_LINE** 在两点之间画线。
  * **LV_CHART_TYPE_COLUMN** 绘制柱。
指定显示类型使用**lv_chart_set_type(chart, LV_CHART_TYPE_...)**。

=== 2.3、修改数据 ===

有几种方式可以设置序列数据值：
  * 使用**ser1->points[3] = 7**在数组中手动设置值，并使用**lv_chart_refresh(chart)**刷新图表。
  * 使用**lv_chart_set_point_id(chart, ser, value, id)**，其中 **id** 是要更新的点的索引。 
  * 使用 **lv_chart_set_next(chart, ser, value)** 在数据末尾添加新值。
  * 将所有点初始化为给定值**lv_chart_init_points(chart, ser, value)**。 
  * 使用**lv_chart_set_points(chart, ser, value_array)**设置数组中的所有点。 
注意:使用** LV_CHART_POINT_DEF** 作为值时，图表将跳过此步骤，不绘制数据。

=== 2.4、修改数列的默认起点 ===

如果希望从默认点（序列的**point[0]**）以外的其他点开始绘图，则可以使用函数 **lv_chart_set_x_start_point(chart, ser, id)** 设置新的起始索引，其中** id** 是开始绘图的新索引位置。
 
=== 2.5、设置外部数据源 ===

使用**lv_chart_set_ext_array(chart, ser, array, point_cnt )** 可以将外部数据源分配给图表数据系列，其中** array** 是 **lv_coord_t** 的外部数组，具有** point_cnt** 个元素。注意：在外部数据源更新后应该调用**lv_chart_refresh(chart)** 以更新图表。

==== 三、图表设置 ====

=== 3.1、获取当前图表信息 ===

有四种方式可获取有关图表的信息：
  * **lv_chart_get_type(chart)** 返回当前图表类型。
  * **lv_chart_get_point_count(chart)** 返回当前图表点数。
  * **lv_chart_get_x_start_point(ser)** 返回指定数据序列的当前绘图索引。
  * **lv_chart_get_point_id(chart, ser, id)** 返回指定数据序列的指定索引处的数据值。

=== 3.2、更新方式 ===

在末尾添加新值的情况下** (lv_chart_set_next)**，有两种更新模式：
  * **LV_CHART_UPDATE_MODE_SHIFT** 将旧数据整体向左移动一位，丢掉第一个，然后在右侧末尾添加新数据。
  * **LV_CHART_UPDATE_MODE_CIRCULAR** 循环添加新数据（类似心电图，总是从前往后逐个更新数据）。
使用 **lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_...)** 可以更改图表的更新模式。 

=== 3.3、点数 ===

数据序列中的点数默认值为 **10**，可以通过 **lv_chart_set_point_count(chart, point_num)** 来修改。注意：将外部缓冲区分配给序列时，也会影响处理点的数量。
 
=== 3.4、垂直范围 ===

使用 **lv_chart_set_range(chart, y_min, y_max)** 可以指定 **y** 轴方向上的最小值和最大值。数据点的值将按比例缩放。默认范围是：**[0,100]**。

=== 3.5、网格线 ===

水平和垂直网格线的数量可以通过**lv_chart_set_div_line_count(chart, hdiv_num, vdiv_num)** 来修改。默认设置为 3 条水平分割线和 5 条垂直分割线。

=== 3.6、刻度线和标签 ===

坐标轴可以添加刻度线和标签。

若要想在 x 轴上设置刻度线和标签文本，可以使用**lv_chart_set_x_tick_text(chart, list_of_values, num_tick_marks, LV_CHART_AXIS_...)**，** list_of_values** 是一个带有 '**\n**' 终止文本（最后一个元素没有）且带有用于刻度的文本的字符串，例如：**const char * list_of_values = "first\nsec\nthird"**。如果设置了**list_of_values**，则**num_tick_marks**为两个标签之间的刻度数。**list_of_values**可以为**NULL**，如果为**NULL**，则它指定总的刻度数。

主刻度线绘制在放置文本的位置，次刻度线绘制在其他位置。要设置 x 轴上刻度线的长度，使用**lv_chart_set_x_tick_length(chart, major_tick_len, minor_tick_len)**。同样的，要设置y 轴也有相同功能的函数 **lv_chart_set_y_tick_text 和 lv_chart_set_y_tick_length** 。

下面的例子实现的功能为，从ADC读取iCore4T电源电压值并以折线图的形式绘制在图表中，上方的文本显示当前电压值，下方的滑块可以调节当前y轴的显示区间[0v,6v]。


{{ :icore4t:icore4t_rtt_lvgl_33_1.gif?direct |}}

<code c>
// main.c 文件内容
#include <rtthread.h>
#include <rtdevice.h>
#include <board.h>
#include "gui.h"
#include "power_adc.h"

#define LED0_PIN GET_PIN(A, 10)                /* 定义LED引脚 */
#define THREAD_PRIORITY         25             /* 线程优先级 */
#define THREAD_STACK_SIZE       1024           /* 线程堆栈大小 */
#define THREAD_TIMESLICE        5              /* 线程时间片 */
static rt_thread_t tid1 = RT_NULL;             /* 定义线程 */

int main(void)
{
	lv_gui_run();                                 /* 绘制图形界面 */
	                                              /* 创建线程，获取AD值更新到图表 */
	tid1 = rt_thread_create("thread1", power_adc_run, RT_NULL, THREAD_STACK_SIZE, THREAD_PRIORITY, THREAD_TIMESLICE);
	if (tid1 != RT_NULL) rt_thread_startup(tid1); /* 启动线程 */
		
	rt_pin_mode(LED0_PIN, PIN_MODE_OUTPUT);       /* 设置LED引脚为输出模式 */
	while(1){
		rt_pin_write(LED0_PIN, PIN_HIGH);     /* LED闪烁 */
		rt_thread_mdelay(100);	
		rt_pin_write(LED0_PIN, PIN_LOW);
		rt_thread_mdelay(100);	
	}
	return RT_EOK;
}
</code>

<code c>
// power_adc.c 文件内容
#include <rtthread.h>
#include <rtdevice.h>
#include <board.h>
#include "lvgl.h"
#include "gui.h"
#include "power_adc.h"

void power_adc_run(void *parameter) {                         /* 电源AD读取线程入口函数 */
	int value = 0;
	int voltage;
	static rt_adc_device_t adc_device = RT_NULL;

	adc_device = (rt_adc_device_t)rt_device_find("adc1"); /* 搜搜索ADC设备 */
	if(adc_device != RT_NULL){
		while(1){
			value = rt_adc_read(adc_device, atoi("16"));/* 读取电源电压，通道16 */ 
			voltage = (int) (value*1500/65535);	    /* 换算电压值*100 */
			lv_chart_set_next(chart, ser1, voltage);    /* 更新数据序列 */
			lv_chart_refresh(chart);                    /* 刷新图标 */
                                                                    /* 更新标签 */
			lv_label_set_text_fmt(label, "The voltage of iCore4T is: %d.%d v", voltage/100, voltage%100);
			rt_thread_mdelay(100);	                    /* 100ms采集一次 */
  		}
	}
}
</code>

<code c>
// gui.c 图形界面绘制函数
void lv_gui_run(void) {
	lvgl2rtt_init("lcd");                                       /* 初始化lvgl2rtt */
	
	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_LINE);               /* 选择折线图 */
	lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_SHIFT);/* 更新模式为左移 */
	lv_chart_set_y_tick_texts(chart, list_of_values, NULL, LV_CHART_AXIS_PRIMARY_Y); /* 设置刻度 */
	lv_chart_set_range(chart, 440, 470);                        /* 设置y轴显示范围 */
	lv_chart_set_point_count(chart, 50);                        /* 设置图表点数 */
	
	lv_obj_set_style_local_bg_opa(chart, LV_CHART_PART_SERIES, LV_STATE_DEFAULT, LV_OPA_50); 
	lv_obj_set_style_local_bg_grad_dir(chart, LV_CHART_PART_SERIES, LV_STATE_DEFAULT , LV_GRAD_DIR_VER);
	lv_obj_set_style_local_bg_main_stop(chart, LV_CHART_PART_SERIES, LV_STATE_DEFAULT, 255); /* 顶部透明度 */
	lv_obj_set_style_local_bg_grad_stop(chart, LV_CHART_PART_SERIES, LV_STATE_DEFAULT, 200); /* 底部透明度 */
	
	ser1 = lv_chart_add_series(chart, LV_COLOR_RED);            /* 图表添加红色线 */
	lv_chart_init_points(chart, ser1, 0);                       /* 赋初值为0 */
	lv_chart_refresh(chart);                                    /* 刷新图表 */
	
	label = lv_label_create(lv_scr_act(), NULL);                /* 创建标签 */
	lv_obj_align(label, NULL, LV_ALIGN_IN_TOP_MID, -105, 20);   /* 设置位置 */

	lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL);   /* 创建滑块 */
	lv_slider_set_value(slider, 30, LV_ANIM_OFF);               /* 设置初始值 */
	lv_obj_set_event_cb(slider, slider_event_cb);               /* 绑定回调函数 */
	lv_slider_set_range(slider, 0, 600);                        /* 设置值范围 */
	lv_obj_set_size(slider, 200, 10);                           /* 设置滑块尺寸 */
	lv_obj_align(slider, NULL, LV_ALIGN_CENTER, 0, 100);        /* 设置滑块位置 */
	lv_slider_set_type(slider, LV_SLIDER_TYPE_RANGE);           /* 设置双点模式 */
	lv_slider_set_left_value(slider, 440, LV_ANIM_OFF);         /* 设置左值位置 */
	lv_slider_set_value(slider, 470, LV_ANIM_OFF);              /* 设置右值位置 */
}
</code>
更改样式，显示刻度坐标可以参考下例：

{{ :icore4t:icore4t_rtt_lvgl_33_2.png?direct |}}

<code c>
// power_adc.c 文件内容
	static lv_style_t style1;                                        /* 新建样式 */
	lv_style_set_bg_color(&style1, LV_CHART_PART_BG, LV_COLOR_BLUE); /* 背景色蓝色*/
	lv_style_set_pad_left(&style1, LV_STATE_DEFAULT, LV_DPX(240));   /* 左填充 */
	
	chart = lv_chart_create(lv_scr_act(), NULL);                     /* 创建图表 */
	lv_obj_set_size(chart, 300, 150);                                /* 设置尺寸 */

	lv_obj_add_style(chart,LV_OBJ_PART_MAIN, &style1);               /* 设置样式 */

	lv_chart_set_div_line_count(chart, 5, 7);                        /* 设置网格线 */

	lv_obj_align(chart, NULL, LV_ALIGN_CENTER, 0, 0);                /* 设置位置 */
	lv_chart_set_type(chart, LV_CHART_TYPE_LINE);                    /* 选择折线图 */
	lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_SHIFT);     /* 更新模式为左移 */
	lv_chart_set_y_tick_texts(chart, list_of_values, NULL, LV_CHART_AXIS_PRIMARY_Y); /* 设置刻度 */
	lv_chart_set_range(chart, 0, 600);                               /* 设置y轴显示范围 */
	lv_chart_set_point_count(chart, 50);                             /* 设置图表点数 */
</code>