小編今天帶大家了解大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果，文中知識(shí)點(diǎn)介紹的非常詳細(xì)。覺得有幫助的朋友可以跟著小編一起瀏覽文章的內(nèi)容，希望能夠幫助更多想解決這個(gè)問題的朋友找到問題的答案，下面跟著小編一起深入學(xué)習(xí)“大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果”的知識(shí)吧。
Dashboard 以豐富的動(dòng)態(tài)、可交互的可視化界面為用戶提供了更好的數(shù)據(jù)使用體驗(yàn)，讓決策者能夠更高效的了解企業(yè)的重要信息和細(xì)節(jié)層次。在 DBD 的各種動(dòng)態(tài)效果中，滾屏是較為常見的一種，例如下圖中的數(shù)據(jù)列表因?yàn)椴季质枪潭ǖ?，因此就需要滾動(dòng)顯示數(shù)據(jù)。
通常報(bào)表中見到的滾屏是因?yàn)椤绊撁娲?、窗口小”，也就是打開的窗口區(qū)域容納不了整個(gè)頁面的內(nèi)容，需要靠鍵盤的方向鍵或鼠標(biāo)滾輪來移動(dòng)查看。而在 DBD 中，為了更好的交互效果，需要滾動(dòng)自動(dòng)持續(xù)進(jìn)行，只有當(dāng)鼠標(biāo)移到該區(qū)域時(shí)才暫停。這種方式雖說已經(jīng)比較常見了，但一般來說報(bào)表廠商卻并沒有直接提供，而是需要通過 jquery,JS 來實(shí)現(xiàn)?，F(xiàn)在我就給大家介紹一下如何實(shí)現(xiàn)這種文字滾屏效果。
我們將在潤乾報(bào)表設(shè)計(jì)器自帶的“設(shè)備故障分析.rpx”基礎(chǔ)上實(shí)現(xiàn)文字滾屏實(shí)例。
1. 數(shù)據(jù)集整理
對(duì)于從數(shù)據(jù)庫讀取的數(shù)據(jù)，可以通過集算器，將數(shù)據(jù)整理成下面截圖中的效果。為了方便做效果，這里我直接將 ds2 這個(gè)內(nèi)建數(shù)據(jù)中的所有字段的值整理到“設(shè)備”這個(gè)字段中，并且在里面加上了些空格，以便頁面上縮進(jìn)的效果好看些。
2. 合并單元格
將 G15 列刪除，B15—F15 選中，合并。
3. 單元格數(shù)據(jù)類型設(shè)置為 html
4. 設(shè)置單元格表達(dá)式，如上圖所示。下面是具體的表達(dá)式。
=“”+replace(string@q(ds2.select( 設(shè)備)),“,”,“
”)+“”
其中：
表示當(dāng)鼠標(biāo)以上區(qū)域的時(shí)候滾動(dòng)停止；
表示當(dāng)鼠標(biāo)移開的時(shí)候繼續(xù)滾動(dòng)。
5. 調(diào)整樣式
原 B15-F15 設(shè)置了各行異色，因?yàn)槲覀兊奈淖譂L動(dòng)項(xiàng)作為統(tǒng)一的一串內(nèi)容，所以按照以上設(shè)置，效果感覺會(huì)有些突兀，如下圖所示。
去掉 B15-F15 背景色的設(shè)置，這樣滾動(dòng)區(qū)域就整體渾然一體。
經(jīng)過以上步驟我們的數(shù)據(jù)列表就在 DBD 面板中滾動(dòng)起來了，并且當(dāng)鼠標(biāo)指向數(shù)據(jù)的時(shí)候就會(huì)停止?jié)L動(dòng)，鼠標(biāo)移開的時(shí)候就繼續(xù)滾動(dòng)了，這樣的交互效果無疑會(huì)為你的大屏展現(xiàn)錦上添花。
上面這個(gè)小例子簡(jiǎn)單實(shí)現(xiàn)了文字滾動(dòng)顯示的效果。下面我具體講解下看似神奇的標(biāo)簽的各個(gè)屬性值，相信看過后一定會(huì)幫助您實(shí)現(xiàn)更好的文字滾動(dòng)效果：
另外，您也可以將 <marquee> 和 marquee> 之間的內(nèi)容替換成圖像或其它對(duì)象。
感謝大家的閱讀，以上就是“大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果”的全部內(nèi)容了，學(xué)會(huì)的朋友趕緊操作起來吧。相信創(chuàng)新互聯(lián)小編一定會(huì)給大家?guī)砀鼉?yōu)質(zhì)的文章。謝謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
重慶分公司
重慶分公司
