關於報表在移動端展現需你需要知道哪些?


現在,企業或者電商平台的商家、業務方,每天都有大量的人需要在線查看大量的指標,用於監控、分析關鍵業務數據的發展趨勢。而且,這些查看分析數據的訴求,對於隨時隨地、方便快捷的要求也越來越高。我們已經習慣了使用潤乾報表在PC端或大屏中進行展現,但是你知道嗎?潤乾報表V2018是以HTML5方式輸出的,不僅支持在PC端展現,同時也支持在手機端自適應展現!

手機報表已有功能

目前我們提供的手機報表APP示例包含的功能有:鑽取、填報表、參數查詢、統計圖,自適應,長按電話號碼撥打電話、掃碼、分享報表到微信或QQ。

 

注:長按電話號碼撥打電話、掃碼、分享的功能在手機APP中有效,只有部分瀏覽器支持這個功能。

自適應方式

設計器安裝目錄reportJsp目錄下提供了matchReport.jsp,在這個頁面中通過自適應js函數reportMatchSize實現了自適應功能。

 

js函數用法說明如下:

reportMatchSize( rongqi, reportdiv, mode )

參數說明:

rongqi  頁面中的html容器元素(如div,td等),報表將按此容器的尺寸進行匹配適應。

reportdiv  報表所在的div對象。

mode  自適應方式,有以下8種取值:

0   按設計尺寸展現,不用適應容器。

1   始終用報表寬度適應容器寬度,報表高度同比例縮放

2   始終用報表高度適應容器高度,報表寬度同比例縮放

3   豎屏時,相當於mode=2;橫屏時,相當於mode=1

4   豎屏時,相當於mode=1;橫屏時,相當於mode=2

       5   豎屏時,報表高和寬均分別適應容器的高和寬;橫屏時,不需適應容器

       6   豎屏時,不需適應容器;橫屏時,報表高和寬均分別適應容器的高和寬

        7   報表高和寬均分別適應容器的高和寬

  

函數功能:讓reportdiv按照實際尺寸以指定的適應方式與容器rongqi的尺寸相匹配適應

說明:自適應功能不適合用於固定表頭的報表和折疊報表,也可以在自己寫的報表展現頁面中添加reportMatchSize這個js方法實現自適應功能。

實例

設計器下reportFiles/mobile目錄中有一張名為phone_1.rpx的報表,如果想在手機端按高寬自適應的話,相應的調用該報表的url為:http://192.168.0.229:6868/demo/reportJsp/matchReport.jsp?rpx=/mobile/phone_1.rpx&match=7,其中match=7。

下面是該報表在手機端瀏覽器顯示的效果:

 

  設計器下reportFiles/mobile目錄中有一張名為match.rpx的報表,如果想在手機端豎屏時按高自適應,橫屏時按寬自適應的話,相應的調用該報表的url為:http://192.168.0.229:6868/demo/reportJsp/matchReport.jsp?rpx=/mobile/match.rpx&match=3,其中match=3。

下面是該報表在手機端瀏覽器顯示的效果:

 

關於手機客戶端APP說明

一般有手機報表需求的客戶,都有自己的APP,前面提供的潤乾手機報表APP只是讓客戶能快速了解潤乾報表手機端展現的效果而已,並不是最終提供給客戶使用的手機客戶端程序。

潤乾報表手機端演示的APP下載地址:

鏈接:https://pan.baidu.com/s/1z59YfHQULJKjJwrU8_1fGg 密碼:l7r5

注:該APP安裝后默認訪問的是潤乾官網的手機報表http://report5.raqsoft.com.cn/mobile,如果需要使用該客戶端訪問客戶自己的手機報表,需要在手機中的raqsoft目錄中添加url.cfg文件,該文件中內容就是要訪問的手機報表的url(如:http://192.168.0.56:6868/demo/mobile/index.jsp)

 

移動端展現數據的報表特點

  1. 簡單數據(避繁就簡)

iphone自帶應用健康中,提供的統計數據,我們可以選擇相應的日期,就能顯示出該日期的3個指標數據。

 

  1. 從匯總到明細,有層次結構(鑽取)

 

  1. 數字與圖表聯動

在上方點擊對應的月份,下方就會以統計數據的列表和圖表將信息顯示。

 

圖片來自中國移動手機客戶端話費查詢

  1. 根據條件查詢過濾出數據。

增加一些查詢維度,通過用戶選擇關注的維度條件,查詢出相應的數據,比如移動的話單,輸入指定的月份可以查詢出該月份的數據。

 

通過這些在移動端展現的報表形式,我們不難發現,由於移動端的屏幕空間有限,統計圖、列表的布局多是上下的,而我們在報表設計器下設計的PC端展現的報表布局常常是固定的,不是流式布局的。所以,如果要在手機端展現和PC端同類的數據,最好還是要制作出更適合移動端的報表,否則直接拿一個很寬很大的報表讓報表在手機端展示,即便是橫屏自適應,效果也很難盡如人意。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM