Les graphiques JSON et Echarts basés sur HTML5 sont affichés dans la même interface

Soudain, il y a une idée, si vous pouvez mettre des points de connaissance différents sur la même interface et le mettre dans une boîte, donc si je veux regarder quoi que ce soit, il peut être affiché directement et cette boîte doit être en mesure de l'ouvrir. Essence J'ai utilisé HT pour réaliser mon idée, avec plus d'une centaine de lignes de code, donc peu de code peuvent réaliser cet effet.

Jetons un coup d'œil aux rendus:

Le plus élémentaire de cet exemple est la boîte la plus externe, alors jetons un coup d'œil à l'atteindre:

 var box = new ht.csgbox ();

L'utilisation de HT peut facilement implémenter cette boîte.

La carte de base encapsulée utilisée dans cet exemple est HT.CSGBOX, un modèle de boîte, vous pouvez vous référer au manuel HT pour la modélisation Web. Ht.Style (HT pour le manuel de style Web).

Si vous souhaitez ajouter un autocollant d'un côté de la boîte, seul ce à quoi je peux penser est la fonction ht.default.setimage encapsulée.

La méthode que j'ai implémentée ici consiste à référer à l'éditeur de HT pour fonctionner, re -declare un composant Graphview et un modèle de données DataModel, puis appelez JSON via la méthode ht.default.xhrload. Contenu dans JSON en tant qu'interface visuelle, puis définit l'animation, puis rafraîchit immédiatement l'interface de ce JSON.

 ht.default.xhrload ('affiche / démo / pompe.json', fonction (texte) {const json = ht.default.parse (texte); pompemdm.deserialize (json); var curent rotation = 0; var dernier = new date () .gettime (); (Currentrotation);

À l'heure actuelle, je ne peux pas ajouter PumpGV et G3D à la div inférieure, et mon intention est d'ajouter PumpGV sur le côté de la CSGBOX en G3D. n'est pas complet. Si vous voulez voir l'impact de cette large hauteur sur l'écran, vous pouvez le changer vous-même.

 pompegv.getwidth = function () {return 600;} pompegv.getheight = function () {return 600;} pompegv.getCanvas ().

L'affichage du graphique Echarts est également très basique.

En fin de compte, il vous suffit de passer ces deux toiles retournées dans ht.default.setimage ::

 ht.default.setimage («echart», graphiques (option));

La fonction HT.Default.DrawImage génère un nouveau diagramme dessine en fait des images sur le canevas, nous n'avons donc qu'à passer le canevas que nous avons dessiné sur ht.default.setimage pour générer des images.

Une chose doit être améliorée. Lorsqu'il y a la transparence, nous devons définir ALL.TRANSPAREENT sur true.

Nous pouvons définir le transparent: vrai qui doit être affiché. Regardez les rendus après l'achèvement:

Ce qui précède est la mise en œuvre de WEBGL basée sur HTML5 des graphiques JSON et Echarts présentés à tout le monde. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!