• 售前

  • 售后

热门帖子
入门百科

Html5大屏数据可视化开辟的实现

[复制链接]
六翼天使494 显示全部楼层 发表于 2021-8-14 14:15:54 |阅读模式 打印 上一主题 下一主题
项目中须要做一个数据展示用的看板,初接到任务以为这个没有什么难度,做个美丽的网页欣赏器全屏就可以了。但是现实做的过程中遇见了问题。
第一:欣赏器不能有横向和纵向的滚动条,没有鼠标的滚动操纵过程。
第二:有各类尺寸的屏,除了在九宫格拼接屏上美满表现,还要同时满意平凡用户的电脑端表现。电脑的客户分辨率大概是1399*768或1920*1080等各类尺寸的分辨率。
利用传统网页制作从上到小的制作方式已经不能满意需求了。例如:
下面的对比图:一个是1902*1080 ,一个是1366*768的屏幕,很显着高分辨率的屏表现的内容多些。

那么怎样做到大屏上内容动态调整恰当屏幕展示呢?
相应式媒体查询、rem,js控制尺寸照旧其他方法呢?最开始以为相应式媒体查询就可以满意我的需求,简直是可以精致化控制,但是时间有限,容不得我花费较长时间,而且写多套尺寸的css 我以为工作量不少,界面元素一多,要照顾的地方也非常多。js控制也实行过,不恰当,要resize调整的项目多。总之,纠结了半天。
厥后买了一个基础版的DataV,做了开辟,但DataV的可编程型不高,要多花费银子买企业版!末了问题照旧回归到要H5制作大屏的需求上来。DataV的适屏做的很好,何不鉴戒下呢,F12检察源码,看到了body 的scale css属性,大概就明白了做法,于是乎开工做。原理就是用一个基础尺寸好比1920*1080来做开辟和结构,末了利用客户端欣赏器的尺寸,按一定的盘算比例做缩放。
关键的代码片段:
  1. var ratio = $(window).height() / 1080;
  2.         console.log(ratio);
  3.         $('body').css({
  4.             transform: "scale(" + ratio + ")",
  5.             transformOrigin: "left top",
  6.             backgroundSize: 100 * (window.screen.width / $(window).width() * ratio) + "%" + ' 100%',
  7.             backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
  8.             marginLeft: ($(window).width() - $('body').width() * ratio) / 2
  9.         });
复制代码
利用这个原理顺利完成了大屏的开辟:结果还不错,临时没有遇见坑!
结果如下:把欣赏器缩到最小:

全屏环境下:

到此这篇关于Html5大屏数据可视化开辟的实现的文章就先容到这了,更多相干Html5数据可视化内容请搜索草根技能分享从前的文章或继续欣赏下面的相干文章,希望各人以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作