小編今天帶大家了解大數(shù)據(jù)報表中如何實現(xiàn)滾動的公告效果,文中知識點介紹的非常詳細。覺得有幫助的朋友可以跟著小編一起瀏覽文章的內(nèi)容,希望能夠幫助更多想解決這個問題的朋友找到問題的答案,下面跟著小編一起深入學(xué)習(xí)“大數(shù)據(jù)報表中如何實現(xiàn)滾動的公告效果”的知識吧。
Dashboard 以豐富的動態(tài)、可交互的可視化界面為用戶提供了更好的數(shù)據(jù)使用體驗,讓決策者能夠更高效的了解企業(yè)的重要信息和細節(jié)層次。在 DBD 的各種動態(tài)效果中,滾屏是較為常見的一種,例如下圖中的數(shù)據(jù)列表因為布局是固定的,因此就需要滾動顯示數(shù)據(jù)。
通常報表中見到的滾屏是因為“頁面大、窗口小”,也就是打開的窗口區(qū)域容納不了整個頁面的內(nèi)容,需要靠鍵盤的方向鍵或鼠標(biāo)滾輪來移動查看。而在 DBD 中,為了更好的交互效果,需要滾動自動持續(xù)進行,只有當(dāng)鼠標(biāo)移到該區(qū)域時才暫停。這種方式雖說已經(jīng)比較常見了,但一般來說報表廠商卻并沒有直接提供,而是需要通過 jquery,JS 來實現(xiàn)?,F(xiàn)在我就給大家介紹一下如何實現(xiàn)這種文字滾屏效果。
我們將在潤乾報表設(shè)計器自帶的“設(shè)備故障分析.rpx”基礎(chǔ)上實現(xiàn)文字滾屏實例。
1. 數(shù)據(jù)集整理
對于從數(shù)據(jù)庫讀取的數(shù)據(jù),可以通過集算器,將數(shù)據(jù)整理成下面截圖中的效果。為了方便做效果,這里我直接將 ds2 這個內(nèi)建數(shù)據(jù)中的所有字段的值整理到“設(shè)備”這個字段中,并且在里面加上了些空格,以便頁面上縮進的效果好看些。
2. 合并單元格
將 G15 列刪除,B15—F15 選中,合并。
3. 單元格數(shù)據(jù)類型設(shè)置為 html
4. 設(shè)置單元格表達式,如上圖所示。下面是具體的表達式。
=“”+replace(string@q(ds2.select( 設(shè)備)),“,”,“
”)+“”
其中:
表示當(dāng)鼠標(biāo)以上區(qū)域的時候滾動停止;
表示當(dāng)鼠標(biāo)移開的時候繼續(xù)滾動。
5. 調(diào)整樣式
原 B15-F15 設(shè)置了各行異色,因為我們的文字滾動項作為統(tǒng)一的一串內(nèi)容,所以按照以上設(shè)置,效果感覺會有些突兀,如下圖所示。
去掉 B15-F15 背景色的設(shè)置,這樣滾動區(qū)域就整體渾然一體。
經(jīng)過以上步驟我們的數(shù)據(jù)列表就在 DBD 面板中滾動起來了,并且當(dāng)鼠標(biāo)指向數(shù)據(jù)的時候就會停止?jié)L動,鼠標(biāo)移開的時候就繼續(xù)滾動了,這樣的交互效果無疑會為你的大屏展現(xiàn)錦上添花。
上面這個小例子簡單實現(xiàn)了文字滾動顯示的效果。下面我具體講解下看似神奇的標(biāo)簽的各個屬性值,相信看過后一定會幫助您實現(xiàn)更好的文字滾動效果:
另外,您也可以將 <marquee> 和 </marquee> 之間的內(nèi)容替換成圖像或其它對象。
感謝大家的閱讀,以上就是“大數(shù)據(jù)報表中如何實現(xiàn)滾動的公告效果”的全部內(nèi)容了,學(xué)會的朋友趕緊操作起來吧。相信創(chuàng)新互聯(lián)小編一定會給大家?guī)砀鼉?yōu)質(zhì)的文章。謝謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
當(dāng)前標(biāo)題:大數(shù)據(jù)報表中如何實現(xiàn)滾動的公告效果-創(chuàng)新互聯(lián)
文章鏈接:http://chinadenli.net/article16/djgpgg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、企業(yè)網(wǎng)站制作、網(wǎng)站排名、虛擬主機、標(biāo)簽優(yōu)化、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容