根据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个页面，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！