使用WebGL如何操作json與echarts圖表-創(chuàng)新互聯(lián)

使用WebGL如何操作json與echarts圖表？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)：從2013年創(chuàng)立為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為上千余家公司企業(yè)提供了專業(yè)的做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)和網(wǎng)站推廣服務(wù)， 按需網(wǎng)站開發(fā)由設(shè)計(jì)師親自精心設(shè)計(jì)，設(shè)計(jì)的效果完全按照客戶的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實(shí)際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領(lǐng)先地位的。

突然有個想法，如果能把一些用到不同的知識點(diǎn)放到同一個界面上，并且放到一個盒子里，這樣我如果要看什么東西就可以很直接顯示出來，而且這個盒子一定要能打開。我用HT實(shí)現(xiàn)了我的想法，代碼一百多行，這么少的代碼能實(shí)現(xiàn)這種效果我覺得還是牛的。

先來看看效果圖：

這個例子最基礎(chǔ)的就是最外層的盒子了，所以我們先來看看如何實(shí)現(xiàn)它：

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

用HT可以很輕易地實(shí)現(xiàn)這個盒子，在HT中封裝了很多基礎(chǔ)圖元類型，我們經(jīng)常用到的ht.Node也是其中一個，這樣我們可以不用反復(fù)地寫相同的代碼來完成基礎(chǔ)的實(shí)現(xiàn)。

這個例子中用的封裝好的基礎(chǔ)圖元是ht.CSGBox，一個盒子模型，可以參考HT for Web 建模手冊，我們在手冊中可以看到，在CSGBox中我們只能操作這個盒子的各個面，如果你想要自己設(shè)置一些特殊的功能，只需要操作ht.Style（HT for Web 風(fēng)格手冊）即可。

要想實(shí)現(xiàn)在盒子上的一個面上添加貼圖，我能想到的只有HT封裝的ht.Default.setImage函數(shù)了。

這邊我實(shí)現(xiàn)的方法是參考HT的editor來運(yùn)作的，重新聲明一個graphview組件和一個datamodel數(shù)據(jù)模型，然后通過ht.Default.xhrLoad方法調(diào)用json，在方法中用ht.Default.parse將text轉(zhuǎn)成json格式，然后反序列化將json里面的內(nèi)容展現(xiàn)成可視化的界面，再設(shè)置動畫，再立即刷新用到這個json的界面，否則就算設(shè)置了動畫，畫面也不會改變。

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都加到底層p上，并且我的意圖是把pumpGV加到g3d中的CSGBox中的一面上，所以為了讓pumpGV顯示出來 必須設(shè)置pumpGV的寬高，而這個寬高必須比我json畫出來的圖占的面積要大，不然顯示不完整。如果想看這個寬高對顯示的影響，可以自己改改看來玩玩。

 pumpGV.getWidth = function() { return 600;}
 pumpGV.getHeight = function(){ return 600;}
 pumpGV.getCanvas().dynamic = true;//設(shè)置這個是為了讓canvas能動態(tài)顯示

echarts圖表的顯示也是很基礎(chǔ)的，只要再加上 canvas.dynamic = true，并且實(shí)時刷新gv即可。

最后，只需要將這兩個回傳的canvas傳入ht.Default.setImage中即可：

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

ht.Default.drawImage函數(shù)生成新的圖實(shí)際上就是在canvas上畫圖，所以我們只要把我們已經(jīng)畫好的canvas傳到ht.Default.setImage就可以生成圖片了。

有一點(diǎn)需要改進(jìn)的，我們可以看到盒子上的線段，圖形，文字周邊都有一圈的鋸齒，因?yàn)槲覀冊谠O(shè)置字體時，同時設(shè)置了半透明，在處于半透明的情況下“blend”樣式會被關(guān)閉，這個時候我們就沒法控制樣式了，一般有透明度的時候需要將“all.transparent”設(shè)置為true，

我們可以設(shè)置需要顯示的面的transparent: true即可?？聪峦瓿珊蟮男Ч麍D：

關(guān)于使用WebGL如何操作json與echarts圖表問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道了解更多相關(guān)知識。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：使用WebGL如何操作json與echarts圖表-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://muchs.cn/article34/djjspe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站內(nèi)鏈、ChatGPT、定制開發(fā)、Google、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)