基于HTML5的WebGL实现json和echarts图表展现在同一个界面


Posted in HTML / CSS onOctober 26, 2017

突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开。我用HT实现了我的想法,代码一百多行,这么少的代码能实现这种效果我觉得还是牛的。

先来看看效果图:

基于HTML5的WebGL实现json和echarts图表展现在同一个界面

这个例子最基础的就是最外层的盒子了,所以我们先来看看如何实现它:

var box = new ht.CSGBox();
 dataModel.add(box);

用HT可以很轻易地实现这个盒子,在HT中封装了很多基础图元类型,我们经常用到的ht.Node也是其中一个,这样我们可以不用反复地写相同的代码来完成基础的实现。

这个例子中用的封装好的基础图元是ht.CSGBox,一个盒子模型,可以参考HT for Web 建模手册,我们在手册中可以看到,在CSGBox中我们只能操作这个盒子的各个面,如果你想要自己设置一些特殊的功能,只需要操作ht.Style(HT for Web 风格手册)即可。

要想实现在盒子上的一个面上添加贴图,我能想到的只有HT封装的ht.Default.setImage函数了。

这边我实现的方法是参考HT的editor来运作的,重新声明一个graphview组件和一个datamodel数据模型,然后通过ht.Default.xhrLoad方法调用json,在方法中用ht.Default.parse将text转成json格式,然后反序列化将json里面的内容展现成可视化的界面,再设置动画,再立即刷新用到这个json的界面,否则就算设置了动画,画面也不会改变。

ht.Default.xhrLoad('displays/demo/pump.json', function(text){
    const json = ht.Default.parse(text);
    pumpDM.deserialize(json);
    var currentRotation = 0;
    var lastTime = new Date().getTime();
    setInterval(function(){
        var time = new Date().getTime();
        var deltaTime = time - lastTime;
        currentRotation += deltaTime * Math.PI / 180 * 0.3;
        lastTime = time;
        pumpDM.getDataByTag('fan1').setRotation(currentRotation);
        pumpDM.getDataByTag('fan2').setRotation(currentRotation);
        box.iv();
        // g3d.iv();这边也可以刷新g3d,但是局部刷新更省
        pumpGV.validateImpl();
    }, 10);
}, 10);

这个时候我不能把pumpGV和g3d都加到底层div上,并且我的意图是把pumpGV加到g3d中的CSGBox中的一面上,所以为了让pumpGV显示出来 必须设置pumpGV的宽高,而这个宽高必须比我json画出来的图占的面积要大,不然显示不完整。如果想看这个宽高对显示的影响,可以自己改改看来玩玩。

pumpGV.getWidth = function() { return 600;}
 pumpGV.getHeight = function(){ return 600;}
 pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示

echarts图表的显示也是很基础的,只要再加上 canvas.dynamic = true,并且实时刷新gv即可。

最后,只需要将这两个回传的canvas传入ht.Default.setImage中即可:

ht.Default.setImage('echart', charts(option));
 ht.Default.setImage('pump', pumpGV.getCanvas());

ht.Default.drawImage函数生成新的图实际上就是在canvas上画图,所以我们只要把我们已经画好的canvas传到ht.Default.setImage就可以生成图片了。

有一点需要改进的,我们可以看到盒子上的线段,图形,文字周边都有一圈的锯齿,因为我们在设置字体时,同时设置了半透明,在处于半透明的情况下“blend”样式会被关闭,这个时候我们就没法控制样式了,一般有透明度的时候需要将“all.transparent”设置为true,

我们可以设置需要显示的面的transparent: true即可。看下完成后的效果图:

基于HTML5的WebGL实现json和echarts图表展现在同一个界面

总结

以上所述是小编给大家介绍的基于HTML5的WebGL实现json和echarts图表展现在同一个界面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 #HTML / CSS
html5清空画布方法(三种)
Oct 16 #HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 #HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 #HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 #HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 #HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 #HTML / CSS
You might like
php 日期时间处理函数小结
2009/12/18 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
javascript快速排序算法详解
2014/09/17 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
一篇不错的Python入门教程
2007/02/08 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python2.7实现爬虫网页数据
2018/05/25 Python
python中的decorator的作用详解
2018/07/26 Python
Python3.4解释器用法简单示例
2019/03/22 Python
python 搜索大文件的实例代码
2019/07/08 Python
解析python的局部变量和全局变量
2019/08/15 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
入党转正介绍人意见
2015/06/03 职场文书
实习感想范文
2015/08/10 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python