【2021.6.24获奖项目】在迪文屏上定制一个柱状图控件

dwinForumAdmin

【开源】在迪文屏上定制一个柱状图控件

首先说一下，为啥要定制一个柱状图控件呢？这是因为DGUS Tool中没有这样的现成控件，然后大家肯定会有这样的需求。因此我定制了一个柱状图控件，并开源给大家！

注意:此实现原理不是采用简单的切图方式，切图方式是有局限性的，而且又麻烦。

视频演示效果：https://www.bilibili.com/video/BV18M4y1u7V1?share_source=copy_web

一、前言

1.本实验平台为迪文的EK043开发板，当然了，只需要稍微修改一下GUI工程中的背景图片尺寸，也可以用于其他的T5L迪文屏。

2.本项目是基于T5L迪文屏，采用C51开发方式。

3.定制的柱状图控件源代码被封装成了column_chart.c和column_chart.h文件，放在了FUNC_HANDLER文件夹下面，如果你没有定制的需求，请不要改动column_chart.c和.h文件中的任何代码，直接使用即可。

4.此柱状图的实现原理是通过一个基础图形控件来实现的，而非多个，支持的柱状图列数不受限制，每一列的颜色可单独设定。

5.柱状图控件代码已经高度封装，目的是为了尽量简化使用难度。

6.以后若还有空闲时间和机会，凡是我开源的迪文项目，都会以教程的方式开源给大家，宗旨是让大家可以在其中能够学到一个或者多个实用功能，而不是把代码写得过于复杂庞大，导致大家花费大量的时间去研究。

二、如何快速上手使用

2.1 GUI工程

就只有一个界面,如下图所示：

此界面上有1个基础图形控件和5个按钮,作用分别如下：

• 基础图形控件：用来显示柱状图的
• 动画：点击时可让柱状图产生一个动画效果
• 样式：给柱状图换样式,有直线和抛物线俩种样式,点击可来回切换
• 颜色：点击之后,可以不断得更换柱状图中每一列的颜色
• 减号：让柱状图中每一列的高度都降低1个像素
• 加号：让柱状图中每一列的高度都增加1个像素
  

2.2 C51代码

1. 首先定义一个柱状图控件对象，如下代码所示：

1. <font size="3" face="宋体">COLUMN_CHART chart; //定义一个柱状图控件</font>

复制代码

2. 然后写一个函数来初始化柱状图控件的参数，如下代码所示：

1. void column_chart_init()
   
2. {
   
3.          u8 i;
   
4.         
   
5.          chart.vp = START_WIN_CHART_VP;//基础图形控件的VP地址
   
6.          chart.start_x = 70;//柱状图中第一列的左下角x坐标
   
7.          chart.start_y = 204;//柱状图中第一列的左下角y坐标
   
8.          chart.x_offset = 42;//柱状图中每一列之间的x轴间隔
   
9.          chart.column_width = 26;//柱状图中每一列的宽度
   
10.          chart.column_num = 9;//共9列,即一,二,三,....,九
    
11.          for(i=0;i<chart.column_num;i++)//模拟柱状图的数据
    
12.          {
    
13.                   chart.columns.height = i*60+10;//每一列的高度
    
14.                   chart.columns.color = 0xF800+i*200;//每一列的颜色
    
15.          }
    
16.          column_chart_draw(&chart);//开始绘制到迪文屏幕上
    
17. }

复制代码

只要在main函数中调用column_chart_init此函数，即可以在迪文屏上看到一个多彩的柱状图。

更多的细节请看附件中的源代码。

备注说明：如需源码，请参考此链接：http://inforum.dwin.com.cn:20080/forum.php?mod=viewthread&tid=4103&_dsign=6bf57c69