《帆软报表培训ppt课件.pptx》由会员分享，可在线阅读，更多相关《帆软报表培训ppt课件.pptx（40页珍藏版）》请在三一办公上搜索。
1、帆软报表操作培训,SQL SKILLS AND DATABASE OPERATION TRAINING,培训人：何广朋,目 录,CONTENTS,入门介绍设计思路图表入门报表美化,基础教程,01,PART ONE,入门介绍-普通报表,入门介绍-聚合报表,入门介绍-决策报表,设计思路-报表设计流程,1）新建数据连接：在制作模板之前首先要确保设计者知道存储数据的数据库类型、数据库地址、访问数据库的用户名密码，然后在FineReport设计器中新建一个数据连接，建立数据库与设计器的交互桥梁；2）新建模板与数据集：数据连接创建好之后，就需要进行模板的添加了，数据连接是用于整个工程的，并没有实质的将数据
2、从数据库中取出来，故还需要在特定模板中新建数据集，通过数据连接从数据库中取数；3）模板设计：数据准备完成之后，就是进行模板的设计了，模板设计是FineReport学习过程中的重中之重，我们将模板设计分为报表设计、参数设计、图表设计和填报设计四个部分，这四个部分是FineReport模板的几大使用方式，报表设计是纯粹的数据展示，参数设计是动态查询数据，图表设计是使用图表来展示数据，填报设计是录入数据，将数据写入数据库中，根据实际情况确定使用哪一种使用方式，或者联合使用哪几种使用方式；4）模板预览：模板设计完成之后，保存模板至工程目录下面，即可预览，在web端查看模板效果。,制作报表前首先需要定义
3、数据来源，实际用户系统最常见的就是数据保存在数据库中，并且在不断更新中，使用数据库数据来制作报表，并且报表内容会随着数据库的更新而更新。FR天然支持这一点，只需要在服务器定义数据连接中定义需要连接的数据库，就可以自定义查询语句查询出需要的数据，从而制作报表，如下图：数据连接存储在工程中，当用户执行需要访问数据库的操作时这些连接被激活。,设计思路-数据连接,设计思路-数据集,1. 数据集是指从数据库中将数据取出来，可直接应用于模板设计的数据展现集合。2. 数据集按照其使用范围可以分为服务器数据集，模板数据集两种。3. 服务器数据集在服务器服务器数据集处定义，适用于整个服务器上所有报表的数据集，其
4、类型分为：数据库查询，内置数据集，文件数据集，SAP数据集，存储过程，多维数据库、关联数据集以及树数据集。,模板设计是FineReport学习过程中的主要难题所在，FineReport模板设计主要包括普通模板设计、决策报表设计和聚合报表设计三种模板设计类型,设计思路-模板设计类型,图表入门-图表制作流程,以图所示的柱形图为例，展示各个地区产品类型的销量情况，为大家简单的介绍下图表的制作流程,图表入门-图表制作事例,2,1,3,4,插入图表并选择图表类型,准备数据,定义图表数据,图表样式设置,整体界面,报表美化-报表配色技巧,帆软为报表的显示外观提供了全面细致的属性设置，可从各个细节灵活美化报表
5、。加上预定义样式的使用，可以方便的对报表外观风格进行统一控制，也能大大提高报表美化的效率。还能通过条件属性控制报表的显示效果。配合样式美观、种类丰富、格式多样的折线图、面积图、组合图、地图、漏斗图等，同时开放部分图表js接口，支持集成第三方图表库，用户可以进行个性化图表的设计，让报表数据的展示变得更生动美观。,1.设计器里选色：点击背景右侧的小三角，点击更多颜色，点击自定义选项卡，这里的HSL或者RGB值，就是我们需要得到的精确的颜色，如下图所示。,RGB 是对机器很友好的色彩模式，但并不够人性化，因为我们对色彩的认识往往是”什么颜色？鲜艳不鲜艳？亮还是暗？”HSL 模式和 HSV(HSB)
6、都是基于 RGB 的，是作为一个更方便友好的方法创建出来的。HSL即色相、饱和度、亮度（Hue, Saturation, Lightness）。HSV即色相、饱和度、明度（Hue, Saturation, Value），又称HSB，其中B即英语：Brightness。色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。明度（V），亮度（L）取0-100%。,报表美化-报表设计与配色技巧,2.设计器直接取色：新版本增加了设计器直接取色的功能，如下：,3. 推荐色彩（均为HSB颜色设置）,JS概述跑马灯案
7、例分析,JS技巧,02,PART TWO,JavaScript概述,FineReport报表采用jQuery v1.9.1框架，jQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，方便地为网站提供AJAX交互，并且它兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。FineReport报表解析后最终成为一个html页面，因此可以使用JS对报表进行各种处理，您可以使用jQuery框架的所有方法对报表进行操作，在此基础上，FineReport还封装了很多内置的js方
8、法。本节我们就JS的基本使用做一个介绍。,JavaScript是一种脚本语言，它可以用来制作与网络无关的，起到与用户交互作用的复杂软件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应 JavaScript是依赖于浏览
9、器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。即JavaScript源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器直接解释执行,1).JS作用机理设计模板时可以给控件、工具栏按钮、整个报表添加JS事件，每个事件对应一个function。当报表转为html页面时会将这些function加到html的头部head。当事件被触发时如点击按钮时，或者导出打印报表时，对应的function就会被执行。2).引入现成的js文件单个模板引入外部js文件：模板模板web属性引用JavaScript；报表工程下所有模板统一
10、引入外部js文件：服务器服务器配置引用JavaScript。相对路径引用js：相对于报表工程目录如webapps，如webappswebroothelp下有引用的js文件demo.js；绝对路径引用js：如D:tomcatwebappsWebReportWEB-INFscriptsscript.js。3).事件编辑界面FineReport有统一的事件编辑界面，如按钮控件设置事件添加点击事件便可看到事件编辑界面了，如下图,JavaScript 使用,JavaScript 使用,跑马灯案例分析,1).确定数据源2).创建决策报表，把body画板的布局方式改为绝对布局。3）拖入报表块，点击编辑，进行
11、编辑状态，绑定好数据4).返回到画板界面，点击“事件”，在事件编辑界面，把代码复制过去。按实际的报表名称设整,JavaScript 脚本,setTimeout(function() /隐藏报表块report0的滚动条（此报表块名为report0，根据具体情况修改） $(divwidgetname=REPORT0).find(.frozen-north)0.style.overflow = hidden; $(divwidgetname=REPORT0).find(.frozen-center)0.style.overflow = hidden;, 100);window.flag = true
12、;/鼠标悬停，滚动停止 setTimeout(function() $(.frozen-center).mouseover(function() window.flag = false; ); /鼠标离开，继续滚动 $(.frozen-center).mouseleave(function() window.flag = true; ); var old = -1; var interval = setInterval(function() if(window.flag) currentpos = $(.frozen-center)0.scrollTop; if(currentpos = ol
13、d) $(.frozen-center)0.scrollTop = 0; else old = currentpos; /以25ms的速度每次滚动1.5PX $(.frozen-center)0.scrollTop = currentpos + 1.5; , 25);, 1000);,详细操作参考：http:/,大屏介绍大屏模板制作大屏FAQ,大屏教程,03,PART TWO,大屏介绍-描述,帆软为企业提供数字大屏解决方案，通过帆软的数据分析产品，用户可以构建强大、全面的“管理驾驶舱”，无需专门设计，就可以将企业的数据管理信息完美地投放在任何屏幕，比如交易大厅、管控中心、生产车间、展览中心等地
14、的LED大屏上。可以实现完美的自适应效果，对于大屏实时监控的信息，比如股价，双11类活动实时交易状况，都可以通过图表属性的自动刷新功能实时同步数据库数据。也支持用户对于大屏的展现内容进行DIY的设计，持接近20种图表类型和延伸的多种图表样式，支持添加文本、图片、Web信息实现各种DIY的布局样式。,大屏介绍-布局排版,首先要遵循一个基准：不要为了做大屏而做大屏，不要为了展现而展现。就是说要明确大屏展现的目的，首要是服务于业务的。要让业务内容、数据合理的展现，就要避免误入疯狂堆砌指标，要分清主次。主要指标：反应核心业务内容的。次要指标：用于进一步阐述主要指标的。,大屏介绍-配色,合理的布局能让业
15、务内容更富有层次，合理的配色能让观看者更舒适。这里讲解一下背景色，背景色又分为整体背景以及单个元素的背景，无论是哪一个，都遵从两点基本原则：深色调&一致性。一般大屏会选择深色系，主要是为了避免视觉刺激。浅色系的，投放到大屏上后会比较刺眼。,大屏介绍-配色,整体背景深色系，一般还是以深蓝色系为主，如下所示是几个推荐的配色方案。,背景不一定要用颜色的，也可以用图片。图片的使用依旧遵从整体深色的原则，同时搭配其他一些现实特性可以让整体看着更有科技感。推荐使用一些带有星空、条纹、渐变线、点缀效果之类的图片。,大屏介绍-点缀,在大屏展现上，细节也会极大的影响整体效果，通过适当给元素、标题、数字等添加一些
16、诸如边框、图画等在内的点缀效果，能帮助提升整体美观度,大屏介绍-动效,动效的范围很广，可以从很多角度解读，比如背景动画，比如刷新的加载动画，比如轮播动画，比如图表的闪烁动画，地图的流向动画等等，都属于动态效果的范畴。动效的增加能让大屏看上去是活的，增加观感体验。但过分的动效极其容易喧宾夺主，让观看者的眼球不知道往哪里聚焦，反而丧失了业务展现价值。这个度很难把握，既要平衡酷炫效果，又要突出内容。,大屏模板制作-准备工作,确认需求、准备数据、整理素材。这里假定需求已由业务部敲定，数据也整理好了，而需要的背景图片、边框等事先都整理完毕。,设计大屏驾驶舱遵循四个基本步骤：布局排版 色彩 点缀效果 动画
17、。,对比类的数据适合用柱形图，占比类的数据适合用饼图，交易明细数据适合用表格。这样，我们就确定了布局里的几个主要元素：柱形图、饼图、表格。由于这里报表块使用了重叠的功能，因此需要使用绝对布局，如下图：,大屏模板制作-模板制作,打开FineReport设计器，按照布局样式，从组件栏拖入对应的图表元素到指定区域并绑定数据，如下图所示：,大屏模板制作-配色,前面总结过，大屏的主体背景建议用深色系，这样可以有效避免视觉刺激。因此背景色换成背景图片，由于整体背景是深色的，使得我们的一些标题文字还看上去不明显，而且图表有种沉闷的感觉，稍微调整了下，把文字内容改成浅色、图表则换稍微明亮一点的颜色，如下图：,
18、独立部署嵌入式部署,部署集成,04,PART TWO,部署集成-独立部署,把FineReport_10.0/webapps目录下的webroot文件拷贝到%Tomcat_HOME%/webapps/下：,将%JAVA_HOME%/jdk/lib下的tools.jar拷贝到部署的服务器中的lib目录中,部署集成-独立部署,报表应用发布(部署)成功后，便可以在客户端浏览器中访问了。在客户端浏览器中输入访问地址http:/ip:端口/工程名/decision/view/report?viewlet=GettingStarted.cpt，发送请求给Web应用服务器如tomcat；Web应用服务器会将请
19、求信息发送给报表servlet；报表servlet根据请求信息，如获取希望查看的模板名称viewlet=GettingStarted.cpt，在后台计算生成GettingStarted.cpt的内容，返回给Web应用服务器；最后Web应用服务器将结果返回给客户端浏览器，浏览器将报表结果呈现给我们。注：若Web应用服务器可以在外网进行访问，那么我们就可以外网访问报表了。在浏览器中输入访问地址http:/ip:端口/工程名/decision，返回如下界面，则部署成功：,部署集成-集成部署,由报表应用目录结构章节可知，若希望将报表部署到已有的工程中时，需要按照下图所示的目录结构，将报表相关的文件拷贝
20、到相应目录：,部署集成-集成部署,2.1全部复制为了简便，可以直接将%FineReport_HOME%webappswebrootWEB-INF目录下面的assets、assist、classes、lib、plugins、reportlets、resources七个文件夹复制到%Tomcat_HOME% webappsexamplesWEB-INF下。2.2部分复制也可以选择性的只复制必要性文件至已有工程中。1）必须复制的文件lib中以fine开头的jar包：包含了报表服务的所有功能，必须拷贝至WEB-INFlib下；assets：新特性图表8.6.0及以后版本存放图表资源的目录。assist
21、：存放一些辅助工具，比如新图表要使用phantom等。plugins：该文件夹包含了报表管理里安装的所有插件的jar包和配置信息，拷贝至WEB-INF下面。reportlets：该文件夹为FineReport服务器规定的，不能修改，且必须为小写，其下可以建立子目录，所有报表模板cpt文件必须保存在reportlets文件夹下，且reportlets文件必须放在WEB-INF下面；resources：该文件夹也是FineReport服务器规定的，不能修改，且必须为小写，下面包含了报表服务器的配置信息，拷贝至WEB-INF下面。以上文件或文件夹是必须拷贝到已有应用目录下的。2）选择性复制的文件cl
22、asses：该文件夹是应用服务器规定的，主要作用是存放.class文件。若对FineReport进行了二次开发，如自定义函数、程序数据源、程序网络报表等，也需要将编译后的class类文件拷贝到该文件夹下；数据库驱动包：若报表中使用了JDBC连接了数据库，需要将对应的数据库驱动包如Oracle数据库的驱动ojdbc14.jar拷贝到WEB-INFlib下，其他数据库驱动同样；2.3 拷贝tools.jar将%JAVA_HOME%/jdk/lib下的tools.jar拷贝到部署的服务器中的lib下面。,部署集成-集成部署,可以通过浏览报表确定是否部署成功。重新启动Tomcat， 启动浏览器，在地址栏输入http:/ip:服务器端口号/项目所在目录/decision，能成功进入下图所示页面，则表明FineReport应用集成web应用并部署Tomcat服务器成功：,官方DEMO官方帮助,帆软报表学习资源,05,PART TWO,学习资源-DEMO案例,http:/,学习资源-帮助文档,http:/,结束,THANK YOU FOR WATCHING,
