html5中怎么實(shí)現(xiàn)大數(shù)據(jù)可視化?案例分享！

在如今這階段大數(shù)據(jù)的聲音越來(lái)越明顯熱度也越來(lái)越高，那么今天我們就來(lái)講講有關(guān)于：“html5中怎么實(shí)現(xiàn)大數(shù)據(jù)可視化?案例分享！”這方面的相關(guān)問(wèn)題！

項(xiàng)目中需要做一個(gè)數(shù)據(jù)展示用的看板，初接到任務(wù)覺(jué)得這個(gè)沒(méi)有什么難度，做個(gè)漂亮的網(wǎng)頁(yè)瀏覽器全屏就可以了。可是實(shí)際做的過(guò)程中碰見(jiàn)了問(wèn)題。

第一：瀏覽器不能有橫向和縱向的滾動(dòng)條，沒(méi)有鼠標(biāo)的滾動(dòng)操作過(guò)程。

第二：有各類(lèi)尺寸的屏，除了在九宮格拼接屏上完美顯示，還要同時(shí)滿(mǎn)足普通用戶(hù)的電腦端顯示。電腦的客戶(hù)分辨率可能是1399*768或1920*1080等各類(lèi)尺寸的分辨率。

利用傳統(tǒng)網(wǎng)頁(yè)制作從上到小的制作方式已經(jīng)不能滿(mǎn)足需求了。例如：

下面的對(duì)比圖：一個(gè)是1902*1080 ,一個(gè)是1366*768的屏幕，很明顯高分辨率的屏顯示的內(nèi)容多些。

那么如何做到大屏上內(nèi)容動(dòng)態(tài)調(diào)整適合屏幕展示呢？

響應(yīng)式媒體查詢(xún)、rem,js控制尺寸還是其他方法呢？最開(kāi)始覺(jué)得響應(yīng)式媒體查詢(xún)就可以滿(mǎn)足我的需求，的確是可以精細(xì)化控制，可是時(shí)間有限，容不得我花費(fèi)較長(zhǎng)時(shí)間，而且寫(xiě)多套尺寸的css 我覺(jué)得工作量不少，界面元素一多，要照顧的地方也非常多。js控制也嘗試過(guò)，不適合，要resize調(diào)整的項(xiàng)目多。總之，糾結(jié)了半天。

后來(lái)買(mǎi)了一個(gè)基礎(chǔ)版的DataV，做了開(kāi)發(fā)，但DataV的可編程型不高，要多花費(fèi)銀子買(mǎi)企業(yè)版！最后問(wèn)題還是回歸到要H5制作大屏的需求上來(lái)。DataV的適屏做的很好，何不借鑒下呢，F(xiàn)12查看源碼，看到了body 的scale css屬性，大概就明白了做法，于是乎開(kāi)工做。原理就是用一個(gè)基礎(chǔ)尺寸比如1920*1080來(lái)做開(kāi)發(fā)和布局，最后利用客戶(hù)端瀏覽器的尺寸，按一定的計(jì)算比例做縮放。

關(guān)鍵的代碼片段：

var ratio = $(window).height() / 1080;
        console.log(ratio);
        $('body').css({
            transform: "scale(" + ratio + ")",
            transformOrigin: "left top",
            backgroundSize: 100 * (window.screen.width / $(window).width() * ratio) + "%" + ' 100%',
            backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
            marginLeft: ($(window).width() - $('body').width() * ratio) / 2
        });

利用這個(gè)原理順利完成了大屏的開(kāi)發(fā)：效果還不錯(cuò)，暫時(shí)沒(méi)有碰見(jiàn)坑！

效果如下：把瀏覽器縮到最?。?/p>

全屏情況下：

我們通過(guò)代碼和截圖我們就可以大概的了解到：“html5中怎么實(shí)現(xiàn)大數(shù)據(jù)可視化?案例分享！”這方面的相關(guān)內(nèi)容，當(dāng)然了對(duì)于html5這方面的學(xué)習(xí)和內(nèi)容肯定不只有這樣子，有感興趣的小伙伴們可以在W3Cschool中進(jìn)行全面的了解！ 那么今天的分享就到這邊了，希望小編分享的內(nèi)容對(duì)大家有所幫助！