DevExpress报表复盘:完成常规二维报表+柱状图+饼图绘制

最近好几个项目都需要根据数据绘制可导出的报表,目前我们在C#中用的最顺手的组件是DevExpress,这个组件可以完成winform和B/S程序,效果不错,功能强大,上手也快,导出数据时,可以导出多种格式(xls/word等).

1 基本配置

生产环境电脑在开发前安装好DevExpress(我们常用DevExpress14版本),默认安装即可,安装时关闭VS,DevExpress会自动给VS生成相关的插件.

2 基本操作

新建报表前,项目需要进行一些简单的配置和引用的添加.

2.1基本配置

web.config需添加devexpress的一些配置(看代码,需要配置的节点还挺多,可直接复制其他项目的,未配置页面也会报web.config未配置的一些错误)

2.2引用添加

添加devexpress的一些引用(不加引用运行会报错),添加引用有两步,第一可以直接把devexpress里面的包拷贝到解决方案,也可以拷贝其他项目中的(建议提前拷贝,不拷贝后续部署程序,上线后也会因缺包报表加载不出来报错);第二解决方案中添加本地的安装的devexpress包,只需要引用两个即可,如下图.

 3 报表生成

报表生产过程中,我们一般会有3个或4代码文件,以TestReport测试报表为例:

TestList.aspx  --  页面显示的前端页(最开始的页面,这里可以完成一些基本的展示和条件筛选)

TestListMod.js  -- 前端页面的js处理程序,用于前端页面的交互处理和条件参数传递

 TestListReportShow.aspx  -- 报表显示页:这个页面主要完成两件事: 

一是完成dev报表的加载和呈现,它会在TestList.aspx发起报表查询得到一张根据结果生成的页面嵌入式报表;

二是完成前端生成报表和条件参数的处理,并向后端发起数据请求,这部分实际处理是在 TestListReportShow.aspx.cs可处理程序中进行;再者完成绑定报表的生成,主要是要将处理程序得到的数据向报表组件传递.

TestListReport.cs: 这个就是报表组件,需要新建DevExpress文件,然后对报表格式进行设置(表格的样子,字体大小颜色等),并根据后端数据进行绑定.这个操作说简单也简单,都是可视化的操作.

3.1 新建报表  TestListReport.cs <报表的关键步骤,所以先讲了>

右键新建 选择 Add DevExpress Item - new Item ,选择 Web Report,填充文件名字(如TestReport.cs),然后选择Empty Report.

(1)报表页面设置

报表需要根据页面需求设置大小,比如是否横向,以及纸张大小,常见的A4纸张,还有边缘调整等.

设置报表页面大小:在TestReport.cs报表页面,左上角开始的箭头上,右键-属性Properties,然后在右边的属性栏种,找到Landscape 属性并改为true(表示横向显示),

选择纸张大小,操作同上,属性中找到 PaperKind:选择常用的纸张,比如A4,A3,Leter等,一般这些规格的纸张,大小都是固定,根据需要选择,就可以改标报表的大小.

调整边缘,有些时候选择了纸张,但是边缘边距依旧可能会影响纸张的大小,这个时候,可以通过移动报表中两边的边缘线,就可以调整边距了

 

(2)报表内容设置 

这里主要是要根据项目需求和数据情况,设计报表(其实和execl表格设置类似),这里可以通过左边的工具栏,拖拽常用的组件到报表.

拖拽之前,要理一下报表页的内容,主要分为PageHeader/ Detail /ReportFooter等,可以根据需要增删(增删右键Insert Band即可以看到),一般都会有PageHeader标题部分和Detail内容详情部分.

(2-1)PageHeader标题部分根据自己的报表和数据需求设置即可,这里很多时候可能是静态的文字,所以只需要从左边的工具栏拖拽xrLabel或者xrChart等设置.

组件一般没有边框,可以通过右键-属性-找到Borders-选择all就行.里面还有一些属性比如字体颜色和大小等,对着右边调整就行.

这个地方有个要注意的,PageHeader设置完之后,这部分下面不要再留空白了,留了会导致和下面的detail中间会空出一段来.

 (2-2)Detail内容部分:

这部分需要先根据自己的数据设置好表格,设置时最好思考好,并与头部Header对应好.

这里的关键是,静态设置完,需要对数据进行绑定和渲染.

a.设置数据源

首先需要设置数据源,在报表控件中,拖拽CollectionDataSource

 拖拽完了之后,在VS控制面板上方点击XTRAEPORTS,然后点击field list,可以看到我们刚刚拖拽的数据源组件CollectionDataSource名,

 然后在其上面右键编辑,添加我们报表需要值(这个值,其实就是后端请求数据返回用于报表的数据填充,数据如何来和绑定,后面会讲到)

 

b.数据表绑定数据源

步骤a完成了数据源的设置,这一步需要将数据源和报表数据绑定.

这里需要注意的事,一般我们都是构造一张二维表数据,然后通过将报表列和数据源一一绑定后,所有数据行都会渲染到页面上,绑定数据操作如图.

点击数据列,可以看到左上角有一个带箭头的蓝色方框,点击后,出现一个Data Binding下拉选择数据源对应的数据字段.

 数据绑定后的实际渲染效果

c. 补充知识

dev上述两步可以完成数据的渲染,此外还可以像execl一样做一个简单地统计汇总等操作,已汇总某一列为例:
选择需要汇总的列,找到左上蓝色带箭头方框,点击后选择 Summary进行设置

报表操作就基本上路上了,还有一些精细化配置,可以在优化,比如调字体颜色等.

参考文献:

关于devexpress报表XtraReport，动态修改报表样式动态添加数据并使用的理解
​​​​​​​DevExpress的XtraReport和微软RDLC报表的使用和对比

 3.2 报表显示页: TestListReportShow.aspx <报表的关键步骤之二>

完成devexpress报表组件的html标签嵌入(声明) 和 完成向后端数据库请求数据用于TestListReport数据源设置.

a. 静态报表组件标签声明:

这部分简单,只要将组件代码拷贝到TestListReportShow.aspx页面就行(可从其他页面直接复制);

b.完成最关键的报表数据请求和TestListReport数据源设置

这个操作,C#的TestListReportShow.aspx网页文件同样可以实现逻辑处理,他在TestListReportShow.aspx.cs中去写逻辑代码,可以直接操作数据库和相关逻辑处理.具体操作逻辑,如下图

 这里绑定后的p.DataSource中的数据就是TestListReport.cs报表中设置的那些(字段和值)

此外,这里有一处没有讲,JObject jobj = JObject.Parse(Request["jsonData"]);其实就是获取最前端页面的请求参数,获取到参数后,开发者可以根据参数对数据的获取进行条件筛选.

3.3 最前端页面设置和最前端处理js- TestList.aspx & TestListMod.js

其实这里,基本上按正常逻辑处理就行, 最前端页面estList.aspx设置根据需求设计就行,主要是完成筛选条件的交互设计或处理;

前端处理js-TestListMod.js则主要是获取最前端页面TestList.aspx的筛选参数,然后简单处理后,携带处理后的请求参数向报表后端TestListReportShow.aspx 发起请求.只管发起请求,不用用结果,所以只要转发一些请求地址即可.最后结果,其实是通过前面讲的3-1TestListReport.cs 和3-2TestListReportShow.aspx&TestListReportShow.aspx.cs完成的.

以上几步串起来就可以完成报表的开发.

4 报表开发进阶:完成柱状图和饼图等可视化图形开发-XRChart

最近报表需求加大了,和常规表格不一样,这里需要加上一些可视化的图形,常用Echart绘制,一下通过DevExpress还有点懵,做完之后,发现也挺简单的,和Echarts类似,都是通过Serise完成的,然后将Serise添加到对应报表中就行.

下面以柱状图和饼图为例,步骤主要分为两个:(操作TestListReport.cs和TestListReportShow.aspx.cs)

(1)TestListReport.cs报表区,

主要完成一个组件XRChart的拖拽,比如拖一个饼图/柱状图组件过去,(组件的拖拽如前文),可以不用设置那么多,拖进去会,直接finish即可,不用按devexpress引导一步步走下去(当然如果你是要做静态的演示可以跟着指导一步步完成,这样会得到一个静态的原型).

拖拽如图:(拖拽过程中一些其他的配置自己可以尝试一下)

 (2)TestListReportShow.aspx.cs中完成图形数据渲染.

处理之前,其实我们要明白一个道理就是,上面的拖拽其实就是帮我们生成了两个组件的容器,现在我们需要通过写代码的方式将数据渲染到容器中去.(跟Echarts类似)

既然是容器,那我们后续肯定需要知道这两个容器的标识.比如id是啥,这里其实不叫id,就是一个组件变量名,自己可以修改定义,查看组件名,可以点击组件,右键属性,在name属性中找到组件的名字,并修改访问权限为public.

 图形渲染代码可以写在TestListReportShow.aspx.cs中,跟Echarts类似,都是声明Serise然后添加到报表画布中即可.

 

if (!IsPostBack)
            {
                ViewState["dt"] = getData();
            }
            salesListReport p = new salesListReport();
            JObject jobj = JObject.Parse(Request["jsonData"]);
            // 报表数据源
            p.DataSource = ViewState["dt"] as DataTable;
            #region 饼图
            // 构建饼图对象的数据源table
            DataTable table = new DataTable("Table1");
            // 先构建列
            table.Columns.Add("Name", typeof(String));
            table.Columns.Add("Value", typeof(Int32));
            // 利用行填充每一列
            table.Rows.Add(new object[] { "华东", 1000 });
            table.Rows.Add(new object[] { "华北", 1200 });
            table.Rows.Add(new object[] { "华南", 900 });
            table.Rows.Add(new object[] { "华中", 1500 });
            table.Rows.Add(new object[] { "华西", 998 });
            table.Rows.Add(new object[] { "国外", 900 });
            // 实例化饼图对象
            Series pieSeries = new Series("销售区域分布", ViewType.Pie);
            SeriesPoint pSeriesPoint;
 
            // 遍历DataTable，将每一个行对象绑定到pSeriesPoint上
            for(int i = 0; i < table.Rows.Count;i++)
            {
                // 找到DT中Name字段和Vlaue的数据
                string name = table.Rows[i]["Name"].ToString();
                double value = Convert.ToDouble(table.Rows[i]["Value"].ToString());
                // 利用pSeriesPoint组织好数据
                pSeriesPoint = new SeriesPoint(name, value);
                pieSeries.Points.Add(pSeriesPoint);
            }
 
            // 设置新建的饼图对象  Argument图例名 ArgumentAndValues 图例名和值
            pieSeries.LegendPointOptions.PointView = PointView.Argument;
            //pieSeries.Label.Font = new Font("宋体", 8);  new System.Drawing.Font("Times New Roman", 15.75F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
            pieSeries.Label.Font = new System.Drawing.Font("Times New Roman", 12); 
            pieSeries.Label.LineLength = 10; // 饼图标识的线条长度 长度会影响饼图的显示大小
            // 设置鼠标悬浮显示toolTip 测试后不起效果
            //pieSeries.ToolTipEnabled = DevExpress.Utils.DefaultBoolean.True; 
            //设置数据源
            pieSeries.DataSource = table;
            // 在报表空间添加饼图 新建的饼图对象 xrChart2是报表中饼图空间的名称,需要设置为公有
            p.xrChart2.Series.Add(pieSeries);
            // PaletteName 对应dev图表Chart设置面板中的外观Platte色调主题选择值
            p.xrChart2.PaletteName = "Blue";
            #endregion
 
            #region 柱状图
            // 构建数据源
            DataTable barDT = new DataTable();
            barDT.Columns.Add("区域",typeof(string));
            barDT.Columns.Add("2020年", typeof(int));
            barDT.Columns.Add("2021年", typeof(int));
            barDT.Rows.Add("华东", 1200, 1400);
            barDT.Rows.Add("华北", 800, 800);
            barDT.Rows.Add("华西", 750, 900);
            barDT.Rows.Add("华中", 1100, 1500);
            barDT.Rows.Add("华南", 990, 1200);
            barDT.Rows.Add("国外", 800, 900);
            // 构建柱状图series
            Series seriesBar1 = new Series("2020年", ViewType.Bar);
            Series seriesBar2 = new Series("2021年", ViewType.Bar);
            // 第一个柱子
            seriesBar1.DataSource = barDT;
            seriesBar1.ArgumentScaleType = ScaleType.Auto;
            seriesBar1.ArgumentDataMember = "区域"; // 以哪个字段进行显示
            seriesBar1.ValueScaleType = ScaleType.Numerical;
            seriesBar1.ValueDataMembers.AddRange(new string[] { "2020年" }); // 柱状图里的柱的取值字段
            ((BarSeriesView)seriesBar1.View).BarWidth = 0.8; // 柱状图柱子的宽度
            // 第二个柱子
            seriesBar2.DataSource = barDT;
            seriesBar2.ArgumentScaleType = ScaleType.Auto;
            seriesBar2.ArgumentDataMember = "区域";
            seriesBar2.ValueScaleType = ScaleType.Numerical;
            seriesBar2.ValueDataMembers.AddRange(new string[] { "2021年" });
            ((BarSeriesView)seriesBar2.View).BarWidth = 0.8;
            // 在报表空间添加柱状图 xrChart1是报表中拖拽图的名称,需要设置为公有,然后把这里的两个series添加进去
            p.xrChart1.Series.Clear();// 绘制前清除控件之前绘制的图
            p.xrChart1.Series.Add(seriesBar1);
            p.xrChart1.Series.Add(seriesBar2);
            #endregion
            // 所有的控件和数据渲染到报表中
            this.ASPxDocumentViewer1.Report = p;

dev图形化报表参考资料

DevExpress控件Chart柱状图、折线图、扇形图

DevExpress chart 制作柱状图并在图上绘制线图

DevExpress 官方列、点和指标选择调色板颜色选择和写法

C#Winform中运用DevExpress提供的ChartControl控件绘制饼状图

DevExpress 自定义柱状图和饼状图颜色

最后的报表呈现效果:
​​​​​​​