基于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 完美实现圆角效果
Jul 13 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 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
第四节--构造函数和析构函数
2006/11/16 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
Pandas分组与排序的实现
2019/07/23 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
python简单的三元一次方程求解实例
2020/04/02 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
代理词怎么写
2015/05/25 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫