帆軟報表培訓課件

帆軟報表操作培訓SQLSKILLSANDDATABASEOPERATIONTRAINING培訓人：何廣朋帆軟報表操作培訓SQLSKILLSANDDATABAS1目錄大屏教程JS技巧基礎教程部署集成CONTENTS目錄大屏教程JS技巧基礎教程部署集成CONTENTS2入門介紹設計思路圖表入門報表美化基礎教程01PARTONE入門介紹基礎教程01PARTONE3入門介紹-普通報表入門介紹-普通報表4入門介紹-聚合報表入門介紹-聚合報表5入門介紹-決策報表入門介紹-決策報表6設計思路-報表設計流程1）新建數(shù)據(jù)連接：在制作模板之前首先要確保設計者知道存儲數(shù)據(jù)的數(shù)據(jù)庫類型、數(shù)據(jù)庫地址、訪問數(shù)據(jù)庫的用戶名密碼，然后在FineReport設計器中新建一個數(shù)據(jù)連接，建立數(shù)據(jù)庫與設計器的交互橋梁；2）新建模板與數(shù)據(jù)集：數(shù)據(jù)連接創(chuàng)建好之后，就需要進行模板的添加了，數(shù)據(jù)連接是用于整個工程的，并沒有實質的將數(shù)據(jù)從數(shù)據(jù)庫中取出來，故還需要在特定模板中新建數(shù)據(jù)集，通過數(shù)據(jù)連接從數(shù)據(jù)庫中取數(shù)；3）模板設計：數(shù)據(jù)準備完成之后，就是進行模板的設計了，模板設計是FineReport學習過程中的重中之重，我們將模板設計分為報表設計、參數(shù)設計、圖表設計和填報設計四個部分，這四個部分是FineReport模板的幾大使用方式，報表設計是純粹的數(shù)據(jù)展示，參數(shù)設計是動態(tài)查詢數(shù)據(jù)，圖表設計是使用圖表來展示數(shù)據(jù)，填報設計是錄入數(shù)據(jù)，將數(shù)據(jù)寫入數(shù)據(jù)庫中，根據(jù)實際情況確定使用哪一種使用方式，或者聯(lián)合使用哪幾種使用方式；4）模板預覽：模板設計完成之后，保存模板至工程目錄下面，即可預覽，在web端查看模板效果。設計思路-報表設計流程1）新建數(shù)據(jù)連接：在制作模板之前首先要7制作報表前首先需要定義數(shù)據(jù)來源，實際用戶系統(tǒng)最常見的就是數(shù)據(jù)保存在數(shù)據(jù)庫中，并且在不斷更新中，使用數(shù)據(jù)庫數(shù)據(jù)來制作報表，并且報表內(nèi)容會隨著數(shù)據(jù)庫的更新而更新。FR天然支持這一點，只需要在服務器>定義數(shù)據(jù)連接中定義需要連接的數(shù)據(jù)庫，就可以自定義查詢語句查詢出需要的數(shù)據(jù)，從而制作報表，如下圖：數(shù)據(jù)連接存儲在工程中，當用戶執(zhí)行需要訪問數(shù)據(jù)庫的操作時這些連接被激活。設計思路-數(shù)據(jù)連接制作報表前首先需要定義數(shù)據(jù)來源，實際用戶系統(tǒng)最常見的就是數(shù)據(jù)8設計思路-數(shù)據(jù)集1.數(shù)據(jù)集是指從數(shù)據(jù)庫中將數(shù)據(jù)取出來，可直接應用于模板設計的數(shù)據(jù)展現(xiàn)集合。2.數(shù)據(jù)集按照其使用范圍可以分為服務器數(shù)據(jù)集，模板數(shù)據(jù)集兩種。3.

服務器數(shù)據(jù)集在服務器>服務器數(shù)據(jù)集處定義，適用于整個服務器上所有報表的數(shù)據(jù)集，其類型分為：數(shù)據(jù)庫查詢，內(nèi)置數(shù)據(jù)集，文件數(shù)據(jù)集，SAP數(shù)據(jù)集，存儲過程，多維數(shù)據(jù)庫、關聯(lián)數(shù)據(jù)集以及樹數(shù)據(jù)集。設計思路-數(shù)據(jù)集1.數(shù)據(jù)集是指從數(shù)據(jù)庫中將數(shù)據(jù)取出來，可直9模板設計是FineReport學習過程中的主要難題所在，F(xiàn)ineReport模板設計主要包括普通模板設計、決策報表設計和聚合報表設計三種模板設計類型設計思路-模板設計類型模板設計是FineReport學習過程中的主要難題所在，F(xiàn)i10圖表入門-圖表制作流程以圖所示的柱形圖為例，展示各個地區(qū)產(chǎn)品類型的銷量情況，為大家簡單的介紹下圖表的制作流程圖表入門-圖表制作流程以圖所示的柱形圖為例，展示各個地區(qū)產(chǎn)品11圖表入門-圖表制作事例2134插入圖表并選擇圖表類型準備數(shù)據(jù)定義圖表數(shù)據(jù)圖表樣式設置整體界面圖表入門-圖表制作事例2134插入圖表并選擇圖表類型準備數(shù)據(jù)12報表美化-報表配色技巧帆軟為報表的顯示外觀提供了全面細致的屬性設置，可從各個細節(jié)靈活美化報表。加上預定義樣式的使用，可以方便的對報表外觀風格進行統(tǒng)一控制，也能大大提高報表美化的效率。還能通過條件屬性控制報表的顯示效果。配合樣式美觀、種類豐富、格式多樣的折線圖、面積圖、組合圖、地圖、漏斗圖等，同時開放部分圖表js接口，支持集成第三方圖表庫，用戶可以進行個性化圖表的設計，讓報表數(shù)據(jù)的展示變得更生動美觀。1.設計器里選色：點擊背景右側的小三角，點擊更多顏色，點擊自定義選項卡，這里的HSL或者RGB值，就是我們需要得到的精確的顏色，如下圖所示。RGB是對機器很友好的色彩模式，但并不夠人性化，因為我們對色彩的認識往往是”什么顏色？鮮艷不鮮艷？亮還是暗？”HSL模式和HSV(HSB)都是基于RGB的，是作為一個更方便友好的方法創(chuàng)建出來的。HSL即色相、飽和度、亮度（Hue,Saturation,Lightness）。HSV即色相、飽和度、明度（Hue,Saturation,Value），又稱HSB，其中B即英語：Brightness。色相（H）是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取0-100%的數(shù)值。明度（V），亮度（L）取0-100%。報表美化-報表配色技巧帆軟為報表的顯示外觀提供了13報表美化-報表設計與配色技巧2.設計器直接取色：新版本增加了設計器直接取色的功能，如下：3.推薦色彩（均為HSB顏色設置）報表美化-報表設計與配色技巧2.設計器直接取色：新版本增加了14JS概述跑馬燈案例分析JS技巧02PARTTWOJS概述JS技巧02PARTTWO15JavaScript概述

FineReport報表采用jQueryv1.9.1框架，jQuery是一個快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現(xiàn)動畫效果，方便地為網(wǎng)站提供AJAX交互，并且它兼容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。FineReport報表解析后最終成為一個html頁面，因此可以使用JS對報表進行各種處理，您可以使用jQuery框架的所有方法對報表進行操作，在此基礎上，F(xiàn)ineReport還封裝了很多內(nèi)置的js方法。本節(jié)我們就JS的基本使用做一個介紹。

JavaScript是一種腳本語言，它可以用來制作與網(wǎng)絡無關的，起到與用戶交互作用的復雜軟件。它是一種基于對象（ObjectBased）和事件驅動（EventDriver）的編程語言。JavaScript是動態(tài)的，它可以直接對用戶或客戶輸入做出響應，無須經(jīng)過Web服務程序。它對用戶的反映響應，是采用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁(HomePage)中執(zhí)行了某種操作所產(chǎn)生的動作，就稱為“事件”(Event)。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發(fā)生后，可能會引起相應的事件響應

JavaScript是依賴于瀏覽器本身，與操作環(huán)境無關，只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確執(zhí)行。即JavaScript源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給客戶端由瀏覽器直接解釋執(zhí)行JavaScript概述FineReport161).JS作用機理設計模板時可以給控件、工具欄按鈕、整個報表添加JS事件，每個事件對應一個function。當報表轉為html頁面時會將這些function加到html的頭部head。當事件被觸發(fā)時如點擊按鈕時，或者導出打印報表時，對應的function就會被執(zhí)行。

2).引入現(xiàn)成的js文件單個模板引入外部js文件：模板>模板web屬性>引用JavaScript；報表工程下所有模板統(tǒng)一引入外部js文件：服務器>服務器配置>引用JavaScript。相對路徑引用js：相對于報表工程目錄如webapps，如webapps\webroot\help下有引用的js文件demo.js；絕對路徑引用js：如D:\tomcat\webapps\WebReport\WEB-INF\scripts\script.js。

3).事件編輯界面FineReport有統(tǒng)一的事件編輯界面，如按鈕控件設置>事件>添加點擊事件便可看到事件編輯界面了，如下圖JavaScript使用1).JS作用機理JavaScript使用17JavaScript使用JavaScript使用18跑馬燈案例分析1).確定數(shù)據(jù)源2).創(chuàng)建決策報表，把body畫板的布局方式改為絕對布局。3）拖入報表塊，點擊編輯，進行編輯狀態(tài)，綁定好數(shù)據(jù)

4).返回到畫板界面，點擊“事件”，在事件編輯界面，把代碼復制過去。按實際的報表名稱設整跑馬燈案例分析1).確定數(shù)據(jù)源19JavaScript腳本setTimeout(function(){//隱藏報表塊report0的滾動條（此報表塊名為report0，根據(jù)具體情況修改）$("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;});//鼠標離開，繼續(xù)滾動

$(".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大屏介紹-描述帆軟為企業(yè)提供數(shù)字大屏解決方案，通過帆軟的數(shù)據(jù)分析產(chǎn)品，用戶可以構建強大、全面的“管理駕駛艙”，無需專門設計，就可以將企業(yè)的數(shù)據(jù)管理信息完美地投放在任何屏幕，比如交易大廳、管控中心、生產(chǎn)車間、展覽中心等地的LED大屏上?？梢詫崿F(xiàn)完美的自適應效果，對于大屏實時監(jiān)控的信息，比如股價，雙11類活動實時交易狀況，都可以通過圖表屬性的自動刷新功能實時同步數(shù)據(jù)庫數(shù)據(jù)。也支持用戶對于大屏的展現(xiàn)內(nèi)容進行DIY的設計，持接近20種圖表類型和延伸的多種圖表樣式，支持添加文本、圖片、Web信息實現(xiàn)各種DIY的布局樣式。大屏介紹-描述帆軟為企業(yè)提供數(shù)字大屏解決方案，通過帆軟的數(shù)據(jù)22大屏介紹-布局排版首先要遵循一個基準：不要為了做大屏而做大屏，不要為了展現(xiàn)而展現(xiàn)。就是說要明確大屏展現(xiàn)的目的，首要是服務于業(yè)務的。要讓業(yè)務內(nèi)容、數(shù)據(jù)合理的展現(xiàn)，就要避免誤入瘋狂堆砌指標，要分清主次。主要指標：反應核心業(yè)務內(nèi)容的。次要指標：用于進一步闡述主要指標的。大屏介紹-布局排版首先要遵循一個基準：不要為了做大屏而做大屏23大屏介紹-配色合理的布局能讓業(yè)務內(nèi)容更富有層次，合理的配色能讓觀看者更舒適。這里講解一下背景色，背景色又分為整體背景以及單個元素的背景，無論是哪一個，都遵從兩點基本原則：深色調&一致性。一般大屏會選擇深色系，主要是為了避免視覺刺激。淺色系的，投放到大屏上后會比較刺眼。大屏介紹-配色合理的布局能讓業(yè)務內(nèi)容更富有層次，合理的配色能24大屏介紹-配色整體背景深色系，一般還是以深藍色系為主，如下所示是幾個推薦的配色方案。背景不一定要用顏色的，也可以用圖片。圖片的使用依舊遵從整體深色的原則，同時搭配其他一些現(xiàn)實特性可以讓整體看著更有科技感。推薦使用一些帶有星空、條紋、漸變線、點綴效果之類的圖片。大屏介紹-配色整體背景深色系，一般還是以深藍色系為主，如下所25大屏介紹-點綴在大屏展現(xiàn)上，細節(jié)也會極大的影響整體效果，通過適當給元素、標題、數(shù)字等添加一些諸如邊框、圖畫等在內(nèi)的點綴效果，能幫助提升整體美觀度大屏介紹-點綴在大屏展現(xiàn)上，細節(jié)也會極大的影響整體效果，通過26大屏介紹-動效動效的范圍很廣，可以從很多角度解讀，比如背景動畫，比如刷新的加載動畫，比如輪播動畫，比如圖表的閃爍動畫，地圖的流向動畫等等，都屬于動態(tài)效果的范疇。動效的增加能讓大屏看上去是活的，增加觀感體驗。但過分的動效極其容易喧賓奪主，讓觀看者的眼球不知道往哪里聚焦，反而喪失了業(yè)務展現(xiàn)價值。這個度很難把握，既要平衡酷炫效果，又要突出內(nèi)容。大屏介紹-動效動效的范圍很廣，可以從很多角度解讀，比如背景動27大屏模板制作-準備工作確認需求、準備數(shù)據(jù)、整理素材。這里假定需求已由業(yè)務部敲定，數(shù)據(jù)也整理好了，而需要的背景圖片、邊框等事先都整理完畢。設計大屏駕駛艙遵循四個基本步驟：布局排版——色彩——點綴效果——動畫。大屏模板制作-準備工作確認需求、準備數(shù)據(jù)、整理素材。這里假定28對比類的數(shù)據(jù)適合用柱形圖，占比類的數(shù)據(jù)適合用餅圖，交易明細數(shù)據(jù)適合用表格。這樣，我們就確定了布局里的幾個主要元素：柱形圖、餅圖、表格。由于這里報表塊使用了重疊的功能，因此需要使用絕對布局，如下圖：大屏模板制作-模板制作打開

FineReport

設計器，按照布局樣式，從組件欄拖入對應的圖表元素到指定區(qū)域并綁定數(shù)據(jù)，如下圖所示：對比類的數(shù)據(jù)適合用柱形圖，占比類的數(shù)據(jù)適合用餅圖，交易明細數(shù)29大屏模板制作-配色前面總結過，大屏的主體背景建議用深色系，這樣可以有效避免視覺刺激。因此背景色換成背景圖片，由于整體背景是深色的，使得我們的一些標題文字還看上去不明顯，而且圖表有種沉悶的感覺，稍微調整了下，把文字內(nèi)容改成淺色、圖表則換稍微明亮一點的顏色，如下圖：大屏模板制作-配色前面總結過，大屏的主體背景建議用深色系，這30獨立部署嵌入式部署部署集成04PARTTWO獨立部署部署集成04PARTTWO31部署集成-獨立部署把FineReport_10.0/webapps目錄下的webroot文件拷貝到%Tomcat_HOME%/webapps/下：將%JAVA_HOME%/jdk/lib下的tools.jar拷貝到部署的服務器中的lib目錄中部署集成-獨立部署把FineReport_10.0/weba32部署集成-獨立部署報表應用發(fā)布(部署)成功后，便可以在客戶端瀏覽器中訪問了。在客戶端瀏覽器中輸入訪問地址http://ip:端口/工程名/decision/view/report?viewlet=GettingStarted.cpt，發(fā)送請求給Web應用服務器如tomcat；Web應用服務器會將請求信息發(fā)送給報表servlet；報表servlet根據(jù)請求信息，如獲取希望查看的模板名稱viewlet=GettingStarted.cpt，在后臺計算生成GettingStarted.cpt的內(nèi)容，返回給Web應用服務器；最后Web應用服務器將結果返回給客戶端瀏覽器，瀏覽器將報表結果呈現(xiàn)給我們。注：若Web應用服務器可以在外網(wǎng)進行訪問，那么我們就可以外網(wǎng)訪問報表了。在瀏覽器中輸入訪問地址http://ip:端口/工程名/decision，返回如下界面，則部署成功：部署集成-獨立部署報表應用發(fā)布(部署)成功后，便可以在客戶端33部署集成-集成部署由報表應用目錄結構章節(jié)可知，若希望將報表部署到已有的工程中時，需要按照下圖所示的目錄結構，將報表相關的文件拷貝到相應目錄：部署集成-集成部署由報表應用目錄結構章節(jié)可知，若希望將報表部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服務器規(guī)定的，不能修改，且必須為小寫，其下可以建立子目錄，所有報表模板cpt文件必須保存