Html5⼤屏数据可视化开发的实现
项⽬中需要做⼀个数据展⽰⽤的看板，初接到任务觉得这个没有什么难度，做个漂亮的⽹页浏览器全屏就可以了。可是实际做的过程中碰见了问题。
第⼀：浏览器不能有横向和纵向的滚动条，没有⿏标的滚动操作过程。
第⼆：有各类尺⼨的屏，除了在九宫格拼接屏上完美显⽰，还要同时满⾜普通⽤户的电脑端显⽰。电脑的客户分辨率可能是1399*768或1920*1080等各类尺⼨的分辨率。
利⽤传统⽹页制作从上到⼩的制作⽅式已经不能满⾜需求了。例如：
下⾯的对⽐图：⼀个是1902*1080 ,⼀个是1366*768的屏幕，很明显⾼分辨率的屏显⽰的内容多些。
那么如何做到⼤屏上内容动态调整适合屏幕展⽰呢？
响应式媒体查询、rem,js控制尺⼨还是其他⽅法呢？最开始觉得响应式媒体查询就可以满⾜我的需求，的确是可以精细化控制，可是时间有限，容不得我花费较长时间，⽽且写多套尺⼨的css 我觉得⼯作量不少，界⾯元素⼀多，要照顾的地⽅也⾮常多。js控制也尝试过，不适合，要resize调整的项⽬多。总之，纠结了半天。
后来买了⼀个基础版的DataV，做了开发，但DataV的可编程型不⾼，要多花费银⼦买企业版！最后问题还是回归到要H5制作⼤屏的需求上来。DataV的适屏做的很好，何不借鉴下呢，F12查看源码，看到了body 的scale css属性，⼤概就明⽩了做法，于是乎开⼯做。原理就是⽤⼀个基础尺⼨⽐如1920*1080来做开发和布局，最后利⽤客户端浏览器的尺⼨，按⼀定的计算⽐例做缩放。
关键的代码⽚段：
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
});
数据可视化大屏设计利⽤这个原理顺利完成了⼤屏的开发：效果还不错，暂时没有碰见坑！
效果如下：把浏览器缩到最⼩：
全屏情况下：
到此这篇关于Html5⼤屏数据可视化开发的实现的⽂章就介绍到这了，更多相关Html5数据可视化内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。