图表
# 一、概述
图表是可视化数据点的基本对象，支持折线图和柱形图。一幅图胜过一千个字，通过图表展示出的数据内容能让用户更快速有效的了解数据特征。
# 二、控件设置
控件设置包含如下部分，控件标题，尺寸，外观，属性，事件，选中尺寸，会列出尺寸对应设置细节，以下会对各部分功能分别介绍。
## 控件标题
控件名称为了方便理解和记忆可以修改，如：LvglChart1修改为：LvglChart1_mytest。
## 尺寸
包括排列方式，X,Y轴坐标，拖动控件会改变对应X,Y轴坐标，也可以手动设置。屏幕左上角为像素坐标原点(x=0,y=0)。
【排列】：支持。。。。等排列方式，（注：暂时未实现）
【宽度】：LED宽度，可手动设置，也可以直接拖动修改
【高度】：LED高度，可手动设置，也可以直接拖动修改
【X轴】：描述控件在屏幕上的像素X坐标位置，可手动设置，也可以直接拖动修改
【Y轴】：描述控件在屏幕上的像素Y坐标位置，可手动设置，也可以直接拖动修改
## 外观
外观部件包含：背景，数据，数据背景3部分。
### 背景
背景包含背景样式，内边距，线属性，文字样式，边框。
背景样式，可以设置背景颜色，不透明度（0-255）设置为0是表示完全透明，渐变色，渐变开始，渐变结束，渐变方向，混合模式，如下图所示：
内边距，可以设置上，下，左，右，内的距离，如下图所示：
线属性，可以设置线条颜色，不透明度（0-255）设置为0是表示完全透明，线条宽度，端点圆角，如下图所示：
文字样式，可以设置文本颜色、字体、字号大小等。（默认支持宋体16号，如果要支持黑体，得保证你的硬件设备上有矢量字库芯片，否则设置黑体后会显示不了相应的文字内容），如下图所示：
边框，可以设置边框颜色，不透明度（0-255）设置为0是表示完全透明，边框宽度，绘制边，最后绘制，混合模式，如下图所示：
### 数据
数据包含半径，间隔。
间隔，可以设置上，下，左，右，内的距离，如下图所示：
### 数据背景
数据背景包含背景样式，线属性，轴间距。
背景样式，线属性详细描述见上面背景里的背景样式和线属性描述。
轴间距，可以设置上，下，左，右，内的距离，如下图所示：
## 属性
属性包含外观类型，显示点数（X轴显示的点位数量），分割线（水平分割+垂直分割，中间用半角逗号分隔），数据设置（添加数据，刷新时长，更新模式），Y轴设置（Y值区间，Y轴样式，Y轴刻度文本，Y轴刻度间隔，Y轴主刻度长度，Y轴小刻度长度），X轴设置（X轴样式，X轴刻度文本，X轴刻度间隔，X轴主刻度长度，X轴小刻度长度）部分，如下图所示：
X轴设置比Y轴设置少了值区间设置，其余设置项和Y轴设置一样，下图包含了完整的Y轴设置项，X轴只显示出部分设置项。
## 事件
包含单击，按下，按住，取消按下，轻击，长按，持续长按，抬起，改变事件，每种事件包含函数和屏幕２个选项。
# 三、使用详解
## 打开UI设计器
首先先创建一个UI工程，这个不做说明，参考前面的快速入门新建工程章节，然后点击UI设计器按钮进入UI设计界面。
## 添加图表
首先点击添加组件按钮，会出现一个下拉菜单，然后选择图表图标，点击确认。
## 控件名称修改
控件名称可以修改用户需要的，方便用户理解，同时会在UiDesign.lua脚本文件里自动生成对应的代码。
## 尺寸设置
可以通过设置X,Y轴坐标设置控件位置，也可以手动拖拽标签放到合适的位置，坐标会自动变化，屏幕左上角为像素坐标原点(x=0,y=0)。宽度和高度课拖拽修改，也可手动设置。
## 外观设置
外观部件包含：背景，数据，数据背景3部分。
### 背景设置
背景包含背景样式，内边距，线属性，文字样式，边框。点击编辑进入对应设置界面，点击清除删除对应设置。
背景样式，可以设置背景颜色，不透明度（0-255）设置为0是表示完全透明，渐变色，渐变开始，渐变结束，渐变方向，混合模式，如下图所示：
内边距，可以设置上，下，左，右，内的距离（这里左，下设置一个比较大的距离用来显示X，Y轴刻度），如下图所示：
线属性，可以设置线条颜色，不透明度（0-255）设置为0是表示完全透明，线条宽度，端点圆角，如下图所示：
文字样式，可以设置文本颜色、字体、字号大小等。（默认支持宋体16号，如果要支持黑体，得保证你的硬件设备上有矢量字库芯片，否则设置黑体后会显示不了相应的文字内容），如下图所示：
边框，可以设置边框颜色，不透明度（0-255）设置为0是表示完全透明，边框宽度，绘制边，最后绘制，混合模式，如下图所示：
### 数据设置
数据包含半径，间隔。间隔，可以设置上，下，左，右，内的距离，点击编辑进入对应设置界面，点击清除删除对应设置。如下图所示：
### 数据背景设置
数据背景包含背景样式，线属性，轴间距。点击编辑进入对应设置界面，点击清除删除对应设置。
背景样式，可以设置背景颜色，不透明度（0-255）设置为0是表示完全透明，渐变色，渐变开始，渐变结束，渐变方向，混合模式，如下图所示：
线属性，可以设置线条颜色，不透明度（0-255）设置为0是表示完全透明，线条宽度，端点圆角，如下图所示：
轴间距，可以设置上，下，左，右，内的距离，如下图所示：
## 属性设置
属性设置包含外观类型，显示点数（X轴显示的点位数量），分割线（水平分割+垂直分割，中间用半角逗号分隔），数据设置（添加数据，刷新时长，更新模式），Y轴设置（Y值区间，Y轴样式，Y轴刻度文本，Y轴刻度间隔，Y轴主刻度长度，Y轴小刻度长度），X轴设置（X轴样式，X轴刻度文本，X轴刻度间隔，X轴主刻度长度，X轴小刻度长度，如下图所示：
## 运行效果
通过上面外观和属性设置后，点击模拟器设置为enable状态，否则为真机模式，运行模拟器后效果如下所示：
## 事件设置
包含单击，按下，按住，取消按下，轻击，长按，持续长按，抬起，改变，每种事件包含函数和屏幕２个选项。
### 函数控制
单击事件选择函数，输入对应的函数名，在UiDesign.lua会自动生成，注册点击事件的消息回调函数，UiHandle.lua会自动生成对应空函数。用户自已添加需要实现功能，这里切换为柱状图来演示效果。
运行模拟器后，点击图表后效果：
### 屏幕切换
首先添加一个新屏幕用来演示用，点击事件选择屏幕，选择新建的mytest屏幕，在UiDesign.lua会自动生成，注册点击事件的消息回调函数，运行模拟器后点击图表后，会切换到刚才创建的mytest屏幕。
# 四、操作视频