曾曉鈺 溫豐蔚 羅斌 韋通明 張亮

摘要：在可視化頁(yè)面開(kāi)發(fā)的過(guò)程中，傳統(tǒng)方法是使用前后端分離開(kāi)發(fā)技術(shù)。首先利用后端編寫(xiě)業(yè)務(wù)方法獲取SQL數(shù)據(jù)并對(duì)其進(jìn)行處理，然后通過(guò) response 返回給客戶(hù)端;前端編寫(xiě)靜態(tài)頁(yè)面，發(fā)送HTTP請(qǐng)求，獲取HTTP響應(yīng)，將獲取的數(shù)據(jù)通過(guò)聯(lián)調(diào)匹配到靜態(tài)頁(yè)面中。為提高可視化頁(yè)面開(kāi)發(fā)效率和質(zhì)量，節(jié)省人力成本，使用FineReport 編輯器來(lái)開(kāi)發(fā)可切換多圖表可視化頁(yè)面，文章詳述了頁(yè)面開(kāi)發(fā)流程并展示了最終效果。

關(guān)鍵詞：FineReport;圖表;可視化頁(yè)面

中圖法分類(lèi)號(hào)：TP393文獻(xiàn)標(biāo)識(shí)碼：A

Development scheme of switchable multi-chart visualizationpage based on FineReport

ZENG Xiaoyu，WEN Fengwei，LUO Bin，WEI Tongming，ZHANG Liang

（SAIC-GM-Wuling Automobile Co.，Ltd.Technology Center，Liuzhou，Guangxi 545007，China）

Abstract：In the process of visual page development， the traditional method is to use the front-end and back- end separation development technology. First， we use the back-end to write business methods to obtain SQL data and process it， and then return it to the client through the response. The front-end writes a static page， sends an HTTP request， obtains an HTTP response， and matches the obtained data to the static page through joint debugging. In order to improve the efficiency and quality of visualization page development and save labor costs， FineReport editor is used to develop switchable multi-chart visualization pages.The article details the page development process and shows the final effect.

Key words：FineReport， chart， visualization page

使用 FineReport 編輯器進(jìn)行可視化頁(yè)面開(kāi)發(fā)，首先，由于編輯器中組件風(fēng)格統(tǒng)一，省略 UI 設(shè)計(jì)環(huán)節(jié);其次，省略大量重復(fù)的前端 HTML 代碼，縮短前端開(kāi)發(fā)時(shí)間;再次，省略后端業(yè)務(wù)方法開(kāi)發(fā)過(guò)程，縮短后端開(kāi)發(fā)時(shí)間;最后，前后端不分離，節(jié)省開(kāi)發(fā)人手，一人足以完成前后端開(kāi)發(fā)及聯(lián)調(diào)等工作。

1概述

對(duì)于可視化頁(yè)面來(lái)說(shuō)，需要呈現(xiàn)多類(lèi)型、多維度、多來(lái)源的數(shù)據(jù)報(bào)表，方便整合信息，統(tǒng)一分析。傳統(tǒng)開(kāi)發(fā)方式一般為前后端分離開(kāi)發(fā)，使數(shù)據(jù)呈現(xiàn)在對(duì)應(yīng)圖表中。本文使用 FineReport 編輯器進(jìn)行頁(yè)面開(kāi)發(fā)，前后端不分離，直接通過(guò) MySQL 語(yǔ)句編寫(xiě)與公式處理，獲得需要的數(shù)據(jù)。

2實(shí)現(xiàn)方案

2.1工具介紹

FineReport 編輯器是由 Java 編寫(xiě)的，具有多維數(shù)據(jù)分析平臺(tái)，能夠采集前段、后端和歷史產(chǎn)生的所有數(shù)據(jù)。數(shù)據(jù)集來(lái)源可以多樣化，能夠支持 MySQL，SQL Sever， Access 等多種常用數(shù)據(jù)庫(kù)[1]，且提供豐富的數(shù)據(jù)可視化圖表，支持 JavaScript 腳本的二次開(kāi)發(fā)[2]，是一種能夠?qū)崿F(xiàn)快速開(kāi)發(fā)可視化頁(yè)面的 Web 報(bào)表軟件工具。

2.2實(shí)現(xiàn)流程

圖1是整個(gè)頁(yè)面通過(guò) FineReport 編輯器設(shè)計(jì)實(shí)現(xiàn)的流程。首先，搭建頁(yè)面框架，用圖表、控件進(jìn)行頁(yè)面填充，得到靜態(tài)頁(yè)面;然后，根據(jù)需要編寫(xiě) js 函數(shù)實(shí)現(xiàn)動(dòng)態(tài)效果;接著，新建數(shù)據(jù)集，通過(guò)數(shù)據(jù)庫(kù)查詢(xún)數(shù)據(jù)集獲得相應(yīng)數(shù)據(jù)，或者建立內(nèi)置數(shù)據(jù)集自行完成表數(shù)據(jù)填充。如須對(duì)數(shù)據(jù)進(jìn)行二次處理，可將數(shù)據(jù)列拖拽到新建報(bào)表塊，用公式進(jìn)行二次計(jì)算處理，然后設(shè)置報(bào)表塊隱藏，在頁(yè)面上呈現(xiàn)二次處理后的數(shù)據(jù);最后，將數(shù)據(jù)設(shè)置到對(duì)應(yīng)顯示圖表中，通過(guò)本地瀏覽器進(jìn)行聯(lián)調(diào)，最終完成整個(gè)可視化頁(yè)面的開(kāi)發(fā)工作。

2.3靜態(tài)頁(yè)面設(shè)計(jì)

通過(guò)標(biāo)簽和按鈕的控件組合，添加 js 方法，可以達(dá)到點(diǎn)擊按鈕切換 Tab 頁(yè)面、點(diǎn)擊按鈕切換標(biāo)簽排序等效果;下拉選擇器用于篩選數(shù)據(jù)，可以直接當(dāng)作動(dòng)態(tài)參數(shù)放入數(shù)據(jù)庫(kù)查詢(xún)數(shù)據(jù)集內(nèi)組合動(dòng)態(tài) MySQL 語(yǔ)句，也可在二次處理的報(bào)表塊內(nèi)設(shè)置，實(shí)現(xiàn)復(fù)雜的篩選效果;日期選擇器可以設(shè)置默認(rèn)值、限制日期值范圍、通過(guò)公式與另一個(gè)日期數(shù)據(jù)聯(lián)動(dòng)，呈現(xiàn)日期范圍選擇的效果;圖表則可以通過(guò)常規(guī)設(shè)置展示獲得數(shù)據(jù)。

2.4開(kāi)發(fā)涉及的部分 JS 方法

（1）使用按鈕切換 Tab 塊。實(shí)現(xiàn)思路：設(shè)置兩個(gè)按鈕（button0，button1）對(duì)應(yīng)兩個(gè) Tab 頁(yè)切換塊，分別給兩個(gè)按鈕添加點(diǎn)擊事件，并在事件里設(shè)置“_g（）. options. form. getWidgetByName （‘ tablayout ）. showCardByIndex（[獲得值]）”。其中，0代表第一個(gè)Tab 塊序號(hào)，1代表第二個(gè) Tab 塊序號(hào)。之后，將自帶的 Tab 切換塊 Tabpane 高度設(shè)置為0隱藏起來(lái)，即可實(shí)現(xiàn)通過(guò)點(diǎn)擊按鈕切換 Tab 塊頁(yè)面的效果。

（2）自動(dòng)無(wú)限滾動(dòng)列表。實(shí)現(xiàn)思路：給報(bào)表塊（report0）設(shè)置初始化方法。添加代碼“_ g （）. options. form. getWidgetByName （‘ report0）. startMarquee（{ offset：1，interval：0.05，to：'top'}）”，代表每0.05s 向上滾動(dòng)1px。

（3）切換提示標(biāo)簽的“前十位”與“末十位”。實(shí)現(xiàn)思路：設(shè)置兩個(gè)按鈕（ button0，button1）對(duì)應(yīng)“前十位”和“末十位”，分別點(diǎn)擊可以獲得1和?1，代表正序和倒敘排序。將值放在一個(gè) label 控件（label0）中，通過(guò)按鈕點(diǎn)擊方法，設(shè)置“_ g （）.options.form. getWidgetByName（‘label0）.setValue （[獲得值]）”，將對(duì)應(yīng)按鈕值放到 label 中，通過(guò) label 值判斷排序狀態(tài)。修改“圖表?樣式?提示?內(nèi)容?自定義”中的代碼，獲取 label 的值，由此判斷圖表值分類(lèi)后是正序/倒敘排列，并取“前十位”/“末十位”。圖表提示代碼如下：

function（）{

var sortFlag =_g（）.options.form.getWidgetByName （'label0'）.getValue（）;

var value = this.category;

var points = this.points.sort（function（a，b）{ var y = a.value;var x = b.value;

return sortFlag ?（ x < y ？-1：（ x > y ？1：0））;}）

var len = points.length >10？10：points.length; if （sortFlag ==1）{

for（ var i =0;i < len;i++）{

if（points[i].series.visible）{

value +="

●"+points[ i].seriesName+"："+points [i].value;

}

}

} else if （sortFlag ==?1）{

for（ var i = len?1;i >=0;i??）{

if（points[i].series.visible）{

value +="

●"+points[ i].seriesName+"："+points [i].value;

}

}

}

return value;

}

2.5新建數(shù)據(jù)集

本次開(kāi)發(fā)涉及數(shù)據(jù)庫(kù)查詢(xún)數(shù)據(jù)集和內(nèi)置數(shù)據(jù)集。數(shù)據(jù)庫(kù)查詢(xún)，即通過(guò)編寫(xiě) MySQL 語(yǔ)句，從數(shù)據(jù)庫(kù)中獲得數(shù)據(jù)，一般用其獲取大量、動(dòng)態(tài)的數(shù)據(jù);內(nèi)置數(shù)據(jù)集，即直接在編輯器內(nèi)自行進(jìn)行表設(shè)計(jì)和數(shù)據(jù)填充，一般用其獲取少量、靜態(tài)的數(shù)據(jù)。數(shù)據(jù)庫(kù)查詢(xún)數(shù)據(jù)集可以直接與圖表聯(lián)調(diào)，也可以通過(guò)報(bào)表塊進(jìn)行二次處理后再聯(lián)調(diào)。內(nèi)置數(shù)據(jù)集可以通過(guò)設(shè)計(jì)列 value 和 label，在下拉選擇器中呈現(xiàn)顯示值和實(shí)際值不一致的效果。

2.6開(kāi)發(fā)涉及的部分公式

（1）IF（boolean，value1，value2）：判斷 boolean，為 true 則取 value1，false 則取 value2。

（2） ROUND（ number，num_digits）：返回 number 按 num_digits 指定位數(shù)四舍五入后的數(shù)字。

（3） INDEXOFARRAY （ array ，index）：獲取 array 第 index 位數(shù)據(jù)。

（4）MAPARRAY（ array，fn）：將 array 中項(xiàng)目轉(zhuǎn)換到另一個(gè)數(shù)組，fn 即 function，是處理數(shù)組項(xiàng)目的函數(shù)。例如， MAPARRAY （ range （7）， format （DATEDELTA （ today （），?item +1），"yyyy?MM? dd"））表示獲取今天至前7天的日期數(shù)組。

（5）DATEDELTA（date，deltadays）：返回日期 date 后 deltadays 的日期。例如，DATEDELTA（ today（），?1）表示昨天，DATEDELTA（ today（），1）表示明天。

2.7圖表聯(lián)調(diào)數(shù)據(jù)并調(diào)試

進(jìn)行圖表與數(shù)據(jù)聯(lián)調(diào)時(shí)，數(shù)據(jù)庫(kù)查詢(xún)數(shù)據(jù)集的數(shù)據(jù)可以直接放入圖表進(jìn)行展示，也可以通過(guò)隱藏報(bào)表塊進(jìn)行二次處理，在圖表數(shù)據(jù)中設(shè)置放入單元格數(shù)據(jù)。需要注意的是，F(xiàn)ineReport 報(bào)表頁(yè)面中數(shù)據(jù)的刷新依賴(lài)動(dòng)態(tài)參數(shù)的變化，此時(shí)需要在圖表的“特效?交互屬性?監(jiān)控刷新”中設(shè)置后臺(tái)監(jiān)測(cè)開(kāi)啟。針對(duì)二次處理數(shù)據(jù)的報(bào)表塊，如果動(dòng)態(tài)參數(shù)未在該報(bào)表塊應(yīng)用，則報(bào)表塊不會(huì)刷新數(shù)據(jù)，所以需要在報(bào)表塊中以公式寫(xiě)入單元格的形式放入算法涉及的動(dòng)態(tài)參數(shù)，再將其設(shè)置為隱藏，才可實(shí)現(xiàn)報(bào)表塊數(shù)據(jù)動(dòng)態(tài)刷新的效果。

3結(jié)語(yǔ)

本文介紹了基于 FineReport 編輯器開(kāi)發(fā)的可切換多圖表可視化頁(yè)面，本質(zhì)是 FineReport 編輯器已對(duì)底層代碼進(jìn)行封裝，使用 FineReport 編輯器時(shí)，只用進(jìn)行較為簡(jiǎn)單的拖拽、設(shè)置等操作就可以完成可視化頁(yè)面的開(kāi)發(fā)?？傊?，F(xiàn)ineReport 編輯器易于上手，節(jié)省成本，便于維護(hù)，統(tǒng)一風(fēng)格，是一種非常實(shí)用的可視化頁(yè)面開(kāi)發(fā)方案。

參考文獻(xiàn)：

[1]李欣烊.基于 FineReport 與企業(yè)系統(tǒng)相結(jié)合實(shí)現(xiàn)數(shù)據(jù)可視化[J].科學(xué)與信息化，2021（26）：44?46.

[2]查曉俊，楊玉志，成剛，等.基于 FineReport 的醫(yī)療設(shè)備采購(gòu)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[ J].醫(yī)療衛(wèi)生裝備，2021，42（1）：32?37.

作者簡(jiǎn)介：

曾曉鈺（1995—），本科，助理工程師，研究方向：基于 FineReport 開(kāi)發(fā)可視化報(bào)表頁(yè)面。