数据可视化大屏怎么开发,前端大数据可视化大屏

　　在项目中，我们需要制作一个广告牌，用于数据显示。刚接到任务的时候，我们觉得并不难。做一个全屏的漂亮的网页浏览器就好了。然而，在实际过程中遇到了一些问题。

　　第一，浏览器不能有水平和垂直滚动条，没有鼠标滚动过程。

　　二是有各种尺寸的屏幕，不仅在九宫格拼接屏上显示完美，还能满足普通用户的电脑显示。电脑的客户分辨率可能是1399*768或1920*1080等。

　　传统的自上而下的网页制作方式已经不能满足需求。例如：

　　如下对比图：一个是1902*1080屏幕，一个是1366*768屏幕。显然，高分辨率屏幕显示的内容更多。

　　那么如何动态调整大屏幕上的内容以适应屏幕显示呢？

　　响应式媒体查询，rem，js大小控制还是其他方法？一开始觉得响应式媒体查询可以满足我的需求，而且可以精确控制。然而，时间有限，所以我不能花很长时间。而且我感觉写多套css工作量很大，界面元素也很多，要照顾的地方也很多。Js控也尝试过，但是不适合。有许多项目需要调整大小。总之我纠结了很久。

　　后来买了一个基础版的DataV开发，但是DataV的可编程性不高，要多花钱买企业版！最后，问题是回到H5制作大银幕的需求上来。DataV的屏幕改编很好，为什么不借鉴一下呢？F12看了下源代码，看到了body的scale css属性，大概明白了做法，就开始做了。原理是使用一个基本尺寸，比如1920*1080，进行开发和布局，最后使用客户端浏览器的尺寸按照一定的计算比例进行缩放。

　　关键代码片段：

　　var比率=$(窗口)。身高()/1080；console.log(比率)；$(body )。css({ transform: scale( ratio ))，transformOrigin: left top ，background size:100 *(window . screen . width/$(window)。width() * ratio) % 100% ，backgroundPosition: ($(窗口)。width() - $(body )。width() * ratio)/2 px top ，marginLeft: ($(窗口)。width() - $(body )。宽度()*比率)/2 })；利用这个原理，成功完成大屏的开发：效果还不错，暂时不坑！

　　效果如下：将浏览器缩小到最小：

　　在全屏的情况下：

　　以上就是本文关于Html5大屏数据可视化开发的实现。有关Html5数据可视化的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。