現(xiàn)在，企業(yè)或者電商平臺的商家、業(yè)務(wù)方，每天都有大量的人需要在線查看大量的指標(biāo)，用于監(jiān)控、分析關(guān)鍵業(yè)務(wù)數(shù)據(jù)的發(fā)展趨勢。而且，這些查看分析數(shù)據(jù)的訴求，對于隨時隨地、方便快捷的要求也越來越高。我們已經(jīng)習(xí)慣了使用潤乾報(bào)表在PC端或大屏中進(jìn)行展現(xiàn)，但是你知道嗎？潤乾報(bào)表V2018是以HTML5方式輸出的，不僅支持在PC端展現(xiàn)，同時也支持在手機(jī)端自適應(yīng)展現(xiàn)！

手機(jī)報(bào)表已有功能

目前我們提供的手機(jī)報(bào)表APP示例包含的功能有：鉆取、填報(bào)表、參數(shù)查詢、統(tǒng)計(jì)圖，自適應(yīng)，長按電話號碼撥打電話、掃碼、分享報(bào)表到微信或QQ。

?

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

自適應(yīng)方式

設(shè)計(jì)器安裝目錄reportJsp目錄下提供了matchReport.jsp,在這個頁面中通過自適應(yīng)js函數(shù)reportMatchSize實(shí)現(xiàn)了自適應(yīng)功能。

?

js函數(shù)用法說明如下：

reportMatchSize( rongqi, reportdiv, mode )

參數(shù)說明：

rongqi ?頁面中的html容器元素(如div,td等)，報(bào)表將按此容器的尺寸進(jìn)行匹配適應(yīng)。

reportdiv ?報(bào)表所在的div對象。

mode ?自適應(yīng)方式，有以下8種取值：

0 ??按設(shè)計(jì)尺寸展現(xiàn)，不用適應(yīng)容器。

1 ??始終用報(bào)表寬度適應(yīng)容器寬度，報(bào)表高度同比例縮放

2 ??始終用報(bào)表高度適應(yīng)容器高度，報(bào)表寬度同比例縮放

3 ??豎屏?xí)r，相當(dāng)于mode=2；橫屏?xí)r，相當(dāng)于mode=1

4 ??豎屏?xí)r，相當(dāng)于mode=1；橫屏?xí)r，相當(dāng)于mode=2

　　 ??? 5 ??豎屏?xí)r，報(bào)表高和寬均分別適應(yīng)容器的高和寬；橫屏?xí)r，不需適應(yīng)容器

　　 ??? 6 ??豎屏?xí)r，不需適應(yīng)容器；橫屏?xí)r，報(bào)表高和寬均分別適應(yīng)容器的高和寬

　　 ?? ? 7 ??報(bào)表高和寬均分別適應(yīng)容器的高和寬

　　

函數(shù)功能：讓reportdiv按照實(shí)際尺寸以指定的適應(yīng)方式與容器rongqi的尺寸相匹配適應(yīng)

說明：自適應(yīng)功能不適合用于固定表頭的報(bào)表和折疊報(bào)表，也可以在自己寫的報(bào)表展現(xiàn)頁面中添加reportMatchSize這個js方法實(shí)現(xiàn)自適應(yīng)功能。

實(shí)例

設(shè)計(jì)器下reportFiles/mobile目錄中有一張名為phone_1.rpx的報(bào)表，如果想在手機(jī)端按高寬自適應(yīng)的話，相應(yīng)的調(diào)用該報(bào)表的url為：http://192.168.0.229:6868/demo/reportJsp/matchReport.jsp?rpx=/mobile/phone_1.rpx&match=7，其中match=7。

下面是該報(bào)表在手機(jī)端瀏覽器顯示的效果:

?

　　設(shè)計(jì)器下reportFiles/mobile目錄中有一張名為match.rpx的報(bào)表，如果想在手機(jī)端豎屏?xí)r按高自適應(yīng)，橫屏?xí)r按寬自適應(yīng)的話，相應(yīng)的調(diào)用該報(bào)表的url為：http://192.168.0.229:6868/demo/reportJsp/matchReport.jsp?rpx=/mobile/match.rpx&match=3，其中match=3。

下面是該報(bào)表在手機(jī)端瀏覽器顯示的效果:

?

關(guān)于手機(jī)客戶端APP說明

一般有手機(jī)報(bào)表需求的客戶，都有自己的APP，前面提供的潤乾手機(jī)報(bào)表APP只是讓客戶能快速了解潤乾報(bào)表手機(jī)端展現(xiàn)的效果而已，并不是最終提供給客戶使用的手機(jī)客戶端程序。

潤乾報(bào)表手機(jī)端演示的APP下載地址：

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

注：該APP安裝后默認(rèn)訪問的是潤乾官網(wǎng)的手機(jī)報(bào)表http://report5.raqsoft.com.cn/mobile,如果需要使用該客戶端訪問客戶自己的手機(jī)報(bào)表，需要在手機(jī)中的raqsoft目錄中添加url.cfg文件，該文件中內(nèi)容就是要訪問的手機(jī)報(bào)表的url（如：http://192.168.0.56:6868/demo/mobile/index.jsp）

?

移動端展現(xiàn)數(shù)據(jù)的報(bào)表特點(diǎn)

簡單數(shù)據(jù)（避繁就簡）

如iphone自帶應(yīng)用健康中，提供的統(tǒng)計(jì)數(shù)據(jù)，我們可以選擇相應(yīng)的日期，就能顯示出該日期的3個指標(biāo)數(shù)據(jù)。

?

從匯總到明細(xì)，有層次結(jié)構(gòu)（鉆取）

?

數(shù)字與圖表聯(lián)動

在上方點(diǎn)擊對應(yīng)的月份，下方就會以統(tǒng)計(jì)數(shù)據(jù)的列表和圖表將信息顯示。

?

圖片來自中國移動手機(jī)客戶端話費(fèi)查詢

根據(jù)條件查詢過濾出數(shù)據(jù)。

增加一些查詢維度，通過用戶選擇關(guān)注的維度條件，查詢出相應(yīng)的數(shù)據(jù)，比如移動的話單，輸入指定的月份可以查詢出該月份的數(shù)據(jù)。

?

通過這些在移動端展現(xiàn)的報(bào)表形式，我們不難發(fā)現(xiàn)，由于移動端的屏幕空間有限，統(tǒng)計(jì)圖、列表的布局多是上下的，而我們在報(bào)表設(shè)計(jì)器下設(shè)計(jì)的PC端展現(xiàn)的報(bào)表布局常常是固定的，不是流式布局的。所以，如果要在手機(jī)端展現(xiàn)和PC端同類的數(shù)據(jù)，最好還是要制作出更適合移動端的報(bào)表，否則直接拿一個很寬很大的報(bào)表讓報(bào)表在手機(jī)端展示，即便是橫屏自適應(yīng)，效果也很難盡如人意。

轉(zhuǎn)載于:https://www.cnblogs.com/shiGuangShiYi/p/9815393.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的关于报表在移动端展现需你需要知道哪些？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。