全国服务热线:4008-888-888

技术知识

根据HTML5的WebGL完成json和echarts图表呈现在同1个页

忽然有个念头,假如能把1些用到不一样的专业知识点放到同1个页面上,而且放到1个盒子里,这样我假如要看甚么物品便可以很立即显示信息出来,并且这个盒子1定要能开启。我用HT完成了我的念头,编码1百多行,这么少的编码能完成这类实际效果我感觉還是牛的。

先看来看实际效果图:

这个事例最基本的便是最外层的盒子了,因此大家先看来看怎样完成它:

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

用HT能够很随便地完成这个盒子,在HT中封裝了许多基本图元种类,大家常常用到的ht.Node也是在其中1个,这样大家能够无需不断地写同样的编码来进行基本的完成。

这个事例选用的封裝好的基本图元是ht.CSGBox,1个盒子实体模型,能够参照HT for Web 模型手册,大家在手册中能够看到,在CSGBox中大家只能实际操作这个盒子的各个面,假如你要想自身设定1些独特的作用,只必须实际操作ht.Style(HT for Web 设计风格手册)便可。

要想完成在盒子上的1个面上加上贴图,我能想起的仅有HT封裝的ht.Default.setImage涵数了。

这边我完成的方式是参照HT的editor来运行的,再次申明1个graphview组件和1个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中的1面上,因此以便让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便可以转化成照片了。

有1点必须改善的,大家能够看到盒子上的直线,图型,文本附近都有1圈的锯齿,由于大家在设定字体样式时,另外设定了半全透明,在处在半全透明的状况下“blend”款式会被关掉,这个情况下大家就无法操纵款式了,1般有全透明度的情况下必须将“all.transparent”设定为true,

大家能够设定必须显示信息的面的transparent: true便可。看下进行后的实际效果图:

总结

以上所述是网编给大伙儿详细介绍的根据HTML5的WebGL完成json和echarts图表呈现在同1个页面,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服