帆软报表培训课件

帆软报表操作培训SQLSKILLSANDDATABASEOPERATIONTRAINING培训人：何广朋帆软报表操作培训SQLSKILLSANDDATABAS1目录大屏教程JS技巧基础教程部署集成CONTENTS目录大屏教程JS技巧基础教程部署集成CONTENTS2入门介绍设计思路图表入门报表美化基础教程01PARTONE入门介绍基础教程01PARTONE3入门介绍-普通报表入门介绍-普通报表4入门介绍-聚合报表入门介绍-聚合报表5入门介绍-决策报表入门介绍-决策报表6设计思路-报表设计流程1）新建数据连接：在制作模板之前首先要确保设计者知道存储数据的数据库类型、数据库地址、访问数据库的用户名密码，然后在FineReport设计器中新建一个数据连接，建立数据库与设计器的交互桥梁；2）新建模板与数据集：数据连接创建好之后，就需要进行模板的添加了，数据连接是用于整个工程的，并没有实质的将数据从数据库中取出来，故还需要在特定模板中新建数据集，通过数据连接从数据库中取数；3）模板设计：数据准备完成之后，就是进行模板的设计了，模板设计是FineReport学习过程中的重中之重，我们将模板设计分为报表设计、参数设计、图表设计和填报设计四个部分，这四个部分是FineReport模板的几大使用方式，报表设计是纯粹的数据展示，参数设计是动态查询数据，图表设计是使用图表来展示数据，填报设计是录入数据，将数据写入数据库中，根据实际情况确定使用哪一种使用方式，或者联合使用哪几种使用方式；4）模板预览：模板设计完成之后，保存模板至工程目录下面，即可预览，在web端查看模板效果。设计思路-报表设计流程1）新建数据连接：在制作模板之前首先要7制作报表前首先需要定义数据来源，实际用户系统最常见的就是数据保存在数据库中，并且在不断更新中，使用数据库数据来制作报表，并且报表内容会随着数据库的更新而更新。FR天然支持这一点，只需要在服务器>定义数据连接中定义需要连接的数据库，就可以自定义查询语句查询出需要的数据，从而制作报表，如下图：数据连接存储在工程中，当用户执行需要访问数据库的操作时这些连接被激活。设计思路-数据连接制作报表前首先需要定义数据来源，实际用户系统最常见的就是数据8设计思路-数据集1.数据集是指从数据库中将数据取出来，可直接应用于模板设计的数据展现集合。2.数据集按照其使用范围可以分为服务器数据集，模板数据集两种。3.

服务器数据集在服务器>服务器数据集处定义，适用于整个服务器上所有报表的数据集，其类型分为：数据库查询，内置数据集，文件数据集，SAP数据集，存储过程，多维数据库、关联数据集以及树数据集。设计思路-数据集1.数据集是指从数据库中将数据取出来，可直9模板设计是FineReport学习过程中的主要难题所在，FineReport模板设计主要包括普通模板设计、决策报表设计和聚合报表设计三种模板设计类型设计思路-模板设计类型模板设计是FineReport学习过程中的主要难题所在，Fi10图表入门-图表制作流程以图所示的柱形图为例，展示各个地区产品类型的销量情况，为大家简单的介绍下图表的制作流程图表入门-图表制作流程以图所示的柱形图为例，展示各个地区产品11图表入门-图表制作事例2134插入图表并选择图表类型准备数据定义图表数据图表样式设置整体界面图表入门-图表制作事例2134插入图表并选择图表类型准备数据12报表美化-报表配色技巧帆软为报表的显示外观提供了全面细致的属性设置，可从各个细节灵活美化报表。加上预定义样式的使用，可以方便的对报表外观风格进行统一控制，也能大大提高报表美化的效率。还能通过条件属性控制报表的显示效果。配合样式美观、种类丰富、格式多样的折线图、面积图、组合图、地图、漏斗图等，同时开放部分图表js接口，支持集成第三方图表库，用户可以进行个性化图表的设计，让报表数据的展示变得更生动美观。1.设计器里选色：点击背景右侧的小三角，点击更多颜色，点击自定义选项卡，这里的HSL或者RGB值，就是我们需要得到的精确的颜色，如下图所示。RGB是对机器很友好的色彩模式，但并不够人性化，因为我们对色彩的认识往往是”什么颜色？鲜艳不鲜艳？亮还是暗？”HSL模式和HSV(HSB)都是基于RGB的，是作为一个更方便友好的方法创建出来的。HSL即色相、饱和度、亮度（Hue,Saturation,Lightness）。HSV即色相、饱和度、明度（Hue,Saturation,Value），又称HSB，其中B即英语：Brightness。色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。明度（V），亮度（L）取0-100%。报表美化-报表配色技巧帆软为报表的显示外观提供了13报表美化-报表设计与配色技巧2.设计器直接取色：新版本增加了设计器直接取色的功能，如下：3.推荐色彩（均为HSB颜色设置）报表美化-报表设计与配色技巧2.设计器直接取色：新版本增加了14JS概述跑马灯案例分析JS技巧02PARTTWOJS概述JS技巧02PARTTWO15JavaScript概述

FineReport报表采用jQueryv1.9.1框架，jQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，方便地为网站提供AJAX交互，并且它兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。FineReport报表解析后最终成为一个html页面，因此可以使用JS对报表进行各种处理，您可以使用jQuery框架的所有方法对报表进行操作，在此基础上，FineReport还封装了很多内置的js方法。本节我们就JS的基本使用做一个介绍。

JavaScript是一种脚本语言，它可以用来制作与网络无关的，起到与用户交互作用的复杂软件。它是一种基于对象（ObjectBased）和事件驱动（EventDriver）的编程语言。JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(HomePage)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应

JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。即JavaScript源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器直接解释执行JavaScript概述FineReport161).JS作用机理设计模板时可以给控件、工具栏按钮、整个报表添加JS事件，每个事件对应一个function。当报表转为html页面时会将这些function加到html的头部head。当事件被触发时如点击按钮时，或者导出打印报表时，对应的function就会被执行。

2).引入现成的js文件单个模板引入外部js文件：模板>模板web属性>引用JavaScript；报表工程下所有模板统一引入外部js文件：服务器>服务器配置>引用JavaScript。相对路径引用js：相对于报表工程目录如webapps，如webapps\webroot\help下有引用的js文件demo.js；绝对路径引用js：如D:\tomcat\webapps\WebReport\WEB-INF\scripts\script.js。

3).事件编辑界面FineReport有统一的事件编辑界面，如按钮控件设置>事件>添加点击事件便可看到事件编辑界面了，如下图JavaScript使用1).JS作用机理JavaScript使用17JavaScript使用JavaScript使用18跑马灯案例分析1).确定数据源2).创建决策报表，把body画板的布局方式改为绝对布局。3）拖入报表块，点击编辑，进行编辑状态，绑定好数据

4).返回到画板界面，点击“事件”，在事件编辑界面，把代码复制过去。按实际的报表名称设整跑马灯案例分析1).确定数据源19JavaScript脚本setTimeout(function(){//隐藏报表块report0的滚动条（此报表块名为report0，根据具体情况修改）$("div[widgetname=REPORT0]").find(".frozen-north")[0].style.overflow="hidden";$("div[widgetname=REPORT0]").find(".frozen-center")[0].style.overflow="hidden";},100);window.flag=true;//鼠标悬停，滚动停止setTimeout(function(){

$(".frozen-center").mouseover(function(){window.flag=false;});//鼠标离开，继续滚动

$(".frozen-center").mouseleave(function(){window.flag=true;});varold=-1;varinterval=setInterval(function(){

if(window.flag){currentpos=$(".frozen-center")[0].scrollTop;

if(currentpos==old){

$(".frozen-center")[0].scrollTop=0;

}else{old=currentpos;

//以25ms的速度每次滚动1.5PX

$(".frozen-center")[0].scrollTop=currentpos+1.5;

}}},25);},1000);详细操作参考：http:///doc-view-2393.htmlJavaScript脚本setTimeout(functi20大屏介绍大屏模板制作大屏FAQ大屏教程03PARTTWO大屏介绍大屏教程03PARTTWO21大屏介绍-描述帆软为企业提供数字大屏解决方案，通过帆软的数据分析产品，用户可以构建强大、全面的“管理驾驶舱”，无需专门设计，就可以将企业的数据管理信息完美地投放在任何屏幕，比如交易大厅、管控中心、生产车间、展览中心等地的LED大屏上。可以实现完美的自适应效果，对于大屏实时监控的信息，比如股价，双11类活动实时交易状况，都可以通过图表属性的自动刷新功能实时同步数据库数据。也支持用户对于大屏的展现内容进行DIY的设计，持接近20种图表类型和延伸的多种图表样式，支持添加文本、图片、Web信息实现各种DIY的布局样式。大屏介绍-描述帆软为企业提供数字大屏解决方案，通过帆软的数据22大屏介绍-布局排版首先要遵循一个基准：不要为了做大屏而做大屏，不要为了展现而展现。就是说要明确大屏展现的目的，首要是服务于业务的。要让业务内容、数据合理的展现，就要避免误入疯狂堆砌指标，要分清主次。主要指标：反应核心业务内容的。次要指标：用于进一步阐述主要指标的。大屏介绍-布局排版首先要遵循一个基准：不要为了做大屏而做大屏23大屏介绍-配色合理的布局能让业务内容更富有层次，合理的配色能让观看者更舒适。这里讲解一下背景色，背景色又分为整体背景以及单个元素的背景，无论是哪一个，都遵从两点基本原则：深色调&一致性。一般大屏会选择深色系，主要是为了避免视觉刺激。浅色系的，投放到大屏上后会比较刺眼。大屏介绍-配色合理的布局能让业务内容更富有层次，合理的配色能24大屏介绍-配色整体背景深色系，一般还是以深蓝色系为主，如下所示是几个推荐的配色方案。背景不一定要用颜色的，也可以用图片。图片的使用依旧遵从整体深色的原则，同时搭配其他一些现实特性可以让整体看着更有科技感。推荐使用一些带有星空、条纹、渐变线、点缀效果之类的图片。大屏介绍-配色整体背景深色系，一般还是以深蓝色系为主，如下所25大屏介绍-点缀在大屏展现上，细节也会极大的影响整体效果，通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果，能帮助提升整体美观度大屏介绍-点缀在大屏展现上，细节也会极大的影响整体效果，通过26大屏介绍-动效动效的范围很广，可以从很多角度解读，比如背景动画，比如刷新的加载动画，比如轮播动画，比如图表的闪烁动画，地图的流向动画等等，都属于动态效果的范畴。动效的增加能让大屏看上去是活的，增加观感体验。但过分的动效极其容易喧宾夺主，让观看者的眼球不知道往哪里聚焦，反而丧失了业务展现价值。这个度很难把握，既要平衡酷炫效果，又要突出内容。大屏介绍-动效动效的范围很广，可以从很多角度解读，比如背景动27大屏模板制作-准备工作确认需求、准备数据、整理素材。这里假定需求已由业务部敲定，数据也整理好了，而需要的背景图片、边框等事先都整理完毕。设计大屏驾驶舱遵循四个基本步骤：布局排版——色彩——点缀效果——动画。大屏模板制作-准备工作确认需求、准备数据、整理素材。这里假定28对比类的数据适合用柱形图，占比类的数据适合用饼图，交易明细数据适合用表格。这样，我们就确定了布局里的几个主要元素：柱形图、饼图、表格。由于这里报表块使用了重叠的功能，因此需要使用绝对布局，如下图：大屏模板制作-模板制作打开

FineReport

设计器，按照布局样式，从组件栏拖入对应的图表元素到指定区域并绑定数据，如下图所示：对比类的数据适合用柱形图，占比类的数据适合用饼图，交易明细数29大屏模板制作-配色前面总结过，大屏的主体背景建议用深色系，这样可以有效避免视觉刺激。因此背景色换成背景图片，由于整体背景是深色的，使得我们的一些标题文字还看上去不明显，而且图表有种沉闷的感觉，稍微调整了下，把文字内容改成浅色、图表则换稍微明亮一点的颜色，如下图：大屏模板制作-配色前面总结过，大屏的主体背景建议用深色系，这30独立部署嵌入式部署部署集成04PARTTWO独立部署部署集成04PARTTWO31部署集成-独立部署把FineReport_10.0/webapps目录下的webroot文件拷贝到%Tomcat_HOME%/webapps/下：将%JAVA_HOME%/jdk/lib下的tools.jar拷贝到部署的服务器中的lib目录中部署集成-独立部署把FineReport_10.0/weba32部署集成-独立部署报表应用发布(部署)成功后，便可以在客户端浏览器中访问了。在客户端浏览器中输入访问地址http://ip:端口/工程名/decision/view/report?viewlet=GettingStarted.cpt，发送请求给Web应用服务器如tomcat；Web应用服务器会将请求信息发送给报表servlet；报表servlet根据请求信息，如获取希望查看的模板名称viewlet=GettingStarted.cpt，在后台计算生成GettingStarted.cpt的内容，返回给Web应用服务器；最后Web应用服务器将结果返回给客户端浏览器，浏览器将报表结果呈现给我们。注：若Web应用服务器可以在外网进行访问，那么我们就可以外网访问报表了。在浏览器中输入访问地址http://ip:端口/工程名/decision，返回如下界面，则部署成功：部署集成-独立部署报表应用发布(部署)成功后，便可以在客户端33部署集成-集成部署由报表应用目录结构章节可知，若希望将报表部署到已有的工程中时，需要按照下图所示的目录结构，将报表相关的文件拷贝到相应目录：部署集成-集成部署由报表应用目录结构章节可知，若希望将报表部34部署集成-集成部署2.1

全部复制为了简便，可以直接将%FineReport_HOME%\webapps\webroot\WEB-INF目录下面的assets、assist、classes、lib、plugins、reportlets、resources七个文件夹复制到%Tomcat_HOME%\webapps\examples\WEB-INF下。2.2

部分复制也可以选择性的只复制必要性文件至已有工程中。

1）必须复制的文件lib中以fine开头的jar包：包含了报表服务的所有功能，必须拷贝至WEB-INF\lib下；assets：新特性图表8.6.0及以后版本存放图表资源的目录。assist：存放一些辅助工具，比如新图表要使用phantom等。plugins：该文件夹包含了报表管理里安装的所有插件的jar包和配置信息，拷贝至WEB-INF下面。reportlets：该文件夹为FineReport服务器规定的，不能修改，且必须为小写，其下可以建立子目录，所有报表模板cpt文件必须保存