基于 FineReport 的可切換多圖表可視化頁面開發方案

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

摘要：在可視化頁面開發的過程中，傳統方法是使用前后端分離開發技術。首先利用后端編寫業務方法獲取SQL數據并對其進行處理，然后通過 response 返回給客戶端;前端編寫靜態頁面，發送HTTP請求，獲取HTTP響應，將獲取的數據通過聯調匹配到靜態頁面中。為提高可視化頁面開發效率和質量，節省人力成本，使用FineReport 編輯器來開發可切換多圖表可視化頁面，文章詳述了頁面開發流程并展示了最終效果。

關鍵詞：FineReport;圖表;可視化頁面

中圖法分類號：TP393文獻標識碼：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 編輯器進行可視化頁面開發，首先，由于編輯器中組件風格統一，省略 UI 設計環節;其次，省略大量重復的前端 HTML 代碼，縮短前端開發時間;再次，省略后端業務方法開發過程，縮短后端開發時間;最后，前后端不分離，節省開發人手，一人足以完成前后端開發及聯調等工作。

1概述

對于可視化頁面來說，需要呈現多類型、多維度、多來源的數據報表，方便整合信息，統一分析。傳統開發方式一般為前后端分離開發，使數據呈現在對應圖表中。本文使用 FineReport 編輯器進行頁面開發，前后端不分離，直接通過 MySQL 語句編寫與公式處理，獲得需要的數據。

2實現方案

2.1工具介紹

FineReport 編輯器是由 Java 編寫的，具有多維數據分析平臺，能夠采集前段、后端和歷史產生的所有數據。數據集來源可以多樣化，能夠支持 MySQL，SQL Sever， Access 等多種常用數據庫[1]，且提供豐富的數據可視化圖表，支持 JavaScript 腳本的二次開發[2]，是一種能夠實現快速開發可視化頁面的 Web 報表軟件工具。

2.2實現流程

圖1是整個頁面通過 FineReport 編輯器設計實現的流程。首先，搭建頁面框架，用圖表、控件進行頁面填充，得到靜態頁面;然后，根據需要編寫 js 函數實現動態效果;接著，新建數據集，通過數據庫查詢數據集獲得相應數據，或者建立內置數據集自行完成表數據填充。如須對數據進行二次處理，可將數據列拖拽到新建報表塊，用公式進行二次計算處理，然后設置報表塊隱藏，在頁面上呈現二次處理后的數據;最后，將數據設置到對應顯示圖表中，通過本地瀏覽器進行聯調，最終完成整個可視化頁面的開發工作。

2.3靜態頁面設計

通過標簽和按鈕的控件組合，添加 js 方法，可以達到點擊按鈕切換 Tab 頁面、點擊按鈕切換標簽排序等效果;下拉選擇器用于篩選數據，可以直接當作動態參數放入數據庫查詢數據集內組合動態 MySQL 語句，也可在二次處理的報表塊內設置，實現復雜的篩選效果;日期選擇器可以設置默認值、限制日期值范圍、通過公式與另一個日期數據聯動，呈現日期范圍選擇的效果;圖表則可以通過常規設置展示獲得數據。

2.4開發涉及的部分 JS 方法

（1）使用按鈕切換 Tab 塊。實現思路：設置兩個按鈕（button0，button1）對應兩個 Tab 頁切換塊，分別給兩個按鈕添加點擊事件，并在事件里設置“_g（）. options. form. getWidgetByName （‘ tablayout ）. showCardByIndex（[獲得值]）”。其中，0代表第一個Tab 塊序號，1代表第二個 Tab 塊序號。之后，將自帶的 Tab 切換塊 Tabpane 高度設置為0隱藏起來，即可實現通過點擊按鈕切換 Tab 塊頁面的效果。

（2）自動無限滾動列表。實現思路：給報表塊（report0）設置初始化方法。添加代碼“_ g （）. options. form. getWidgetByName （‘ report0）. startMarquee（{ offset：1，interval：0.05，to：'top'}）”，代表每0.05s 向上滾動1px。

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

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新建數據集

本次開發涉及數據庫查詢數據集和內置數據集。數據庫查詢，即通過編寫 MySQL 語句，從數據庫中獲得數據，一般用其獲取大量、動態的數據;內置數據集，即直接在編輯器內自行進行表設計和數據填充，一般用其獲取少量、靜態的數據。數據庫查詢數據集可以直接與圖表聯調，也可以通過報表塊進行二次處理后再聯調。內置數據集可以通過設計列 value 和 label，在下拉選擇器中呈現顯示值和實際值不一致的效果。

2.6開發涉及的部分公式

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

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

（3） INDEXOFARRAY （ array ，index）：獲取 array 第 index 位數據。

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

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

2.7圖表聯調數據并調試

進行圖表與數據聯調時，數據庫查詢數據集的數據可以直接放入圖表進行展示，也可以通過隱藏報表塊進行二次處理，在圖表數據中設置放入單元格數據。需要注意的是，FineReport 報表頁面中數據的刷新依賴動態參數的變化，此時需要在圖表的“特效?交互屬性?監控刷新”中設置后臺監測開啟。針對二次處理數據的報表塊，如果動態參數未在該報表塊應用，則報表塊不會刷新數據，所以需要在報表塊中以公式寫入單元格的形式放入算法涉及的動態參數，再將其設置為隱藏，才可實現報表塊數據動態刷新的效果。

3結語

本文介紹了基于 FineReport 編輯器開發的可切換多圖表可視化頁面，本質是 FineReport 編輯器已對底層代碼進行封裝，使用 FineReport 編輯器時，只用進行較為簡單的拖拽、設置等操作就可以完成可視化頁面的開發。總之，FineReport 編輯器易于上手，節省成本，便于維護，統一風格，是一種非常實用的可視化頁面開發方案。

參考文獻：

[1]李欣烊.基于 FineReport 與企業系統相結合實現數據可視化[J].科學與信息化，2021（26）：44?46.

[2]查曉俊，楊玉志，成剛，等.基于 FineReport 的醫療設備采購管理系統的設計與實現[ J].醫療衛生裝備，2021，42（1）：32?37.

作者簡介：

曾曉鈺（1995—），本科，助理工程師，研究方向：基于 FineReport 開發可視化報表頁面。