图表

1. 概述

图表控件用于配置和生成数据可视化图表。用户可以设置图表的各种属性,如类型、数据源、数据范围、颜色、样式等,并生成符合要求的图表资源文件,供固件解析并使用。

创建路径:基本>图表

2. 界面参数说明

2.1 基本信息

  • ID:图表控件的唯一ID,用于固件代码查找UID,用户可以根据需求修改

    • 默认值:chart_xxx. 创建控件时自动生成

    • 格式要求:

      • 只能包含字母、数字和下划线

      • 长度不能超过15个字符

  • UID:图表资源的唯一标识符,用于固件代码查找图表控件。系统自动生成,用户无需手动设置。

    • 特征值:以15开头

2.2 位置和尺寸

  • 位置 x:图表在容器中的X坐标位置

  • 位置 y:图表在容器中的Y坐标位置

  • 尺寸 w:图表的宽度

  • 尺寸 h:图表的高度

注意:控件范围不能超过父控件范围,否则可能导致显示异常或生成报错。

2.3 对齐控件

  • 对齐控件:设置图像在容器中的对齐方式。(目前不支持)

2.4 图表类型设置

  • 类型:设置图表的类型(折线图,柱状图)

2.5 数据源设置

  • +按钮:用于添加图表的数据源

2.6 样式设置

  • 柱/线颜色(ARGB):设置图表中柱或线的颜色

  • 采样周期倍数:设置图表数据的采样周期倍数

    • 输入框显示当前采样周期倍数

    • 支持修改采样周期倍数来调整数据显示密度

  • 点大小:设置图表中点的大小

    • 输入框显示当前点大小值

    • 支持修改点大小来调整图表显示效果

  • 柱/线宽度:设置图表中柱或线的宽度

    • 输入框显示当前柱/线宽度值

    • 支持修改柱/线宽度来调整图表显示效果

2.7 Y轴设置

  • Y值最小:设置图表Y轴的最小值

    • 输入框显示当前Y轴最小值

    • 支持修改Y轴最小值来调整数据显示范围

  • Y值最大:设置图表Y轴的最大值

    • 输入框显示当前Y轴最大值

    • 支持修改Y轴最大值来调整数据显示范围

2.8 采样设置

  • 采样点数:设置图表的采样点数量

    • 输入框显示当前采样点数

    • 支持修改采样点数来调整数据精度和显示效果

2.9 背景设置

  • 背景(ARGB):设置图表的背景颜色

    • 显示颜色预览框

    • 点击可以打开颜色选择器进行选择

2.10 边距设置

  • 边距左:设置图表左侧的边距

    • 输入框显示当前左边距值

    • 支持修改左边距来调整图表布局

  • 边距上:设置图表上方的边距

    • 输入框显示当前上边距值

    • 支持修改上边距来调整图表布局

  • 边距右:设置图表右侧的边距

    • 输入框显示当前右边距值

    • 支持修改右边距来调整图表布局

  • 边距下:设置图表下方的边距

    • 输入框显示当前下边距值

    • 支持修改下边距来调整图表布局

3. 演示视频