J'ai constaté qu'il existe de nombreux graphiques sur la gestion du réseau industriel de la SCADA ou des télécommunications. Le tableau peut facilement faire de beaux. Essence Essence En voyant un graphique vendu sur le site Web, ça fait du bien.
Les rendus dynamiques sont les suivants:
Cet exemple est vraiment facile à implémenter HT.
dm = new ht.datamodel ();
Ensuite, c'est de créer ces cinq graphiques.
Les nœuds de couche intérieure sont très faciles.
var node = new ht.node (); node.s ({'shape3d': cylindermodel, 'shape3d.color': colori 1],}); Node.p3 (P3 [0], S3 [1] / 2, p3 [2]);Il faut expliquer que le réglage de «Shape3d»: Cylindermodel. :
cylinderModel = ht.default.CreateCylinderModel (1000, 0, 1000, false, false, vrai, vrai);
Configurez ensuite un attribut de changement dynamique MyHeight.
Ensuite, nous devons créer un nœud transparent externe.
var cnode = new ht.node (); #fff ',' 3d .movable ': false});
Définissez le «Shape3d.transparent» comme vrai, puis définissez la transparence de «Shape3d.opcity».
Enfin, le texte 3D, qui affiche une police de la face au format JSON, puis charge la police du format JSON à la mémoire par ht.default.load.load.loadFontface.
ht.default.loadfontface ('./ wenquanyi.json', function () {// ...... var text = new ht.node (); text.s3 ([5, 5, 5]); texte .P3 (cnode.p3 () [0] -5, -10, 0); 'Myheight') + '%', 'shape3d.text.curvesegments': 1, '3d.movable': false});});Parce que la méthode de dessin de la police de caractères que nous utilisons est un mot composé d'innombrables triangles, qui occupent une grande mémoire, donc j'ajuste la finesse de la courbe du graphique, mais elle est toujours très claire. De bonnes polices peuvent être utilisées et m'ont dit.
Enfin, pour modifier dynamiquement le graphique du pilier dans le graphique du graphique, nous devons définir l'animation et mettre à jour simultanément la valeur des polices 3D:
SetInterval (function () {if (node.a ('myheight') <100) {node.a ('myheight', (node.getattr ('myheight') + 1)); node.s3 (20, node. a ('myheight'), 20); node.p3 (p3 [0], node.a ('myheight') / 2, p3 [2]);} else {node.a ('myheight', 0); Node.s3 ([20, 0, 20]); 'myheight') + '%');}, 100);Ici, mon attribut personnalisé Myheight a joué un rôle décisif.
Si vous ne comprenez pas, vous pouvez laisser un message ou aller directement sur notre site Web officiel pour vérifier le manuel HT pour le Web.
Ce qui précède est tout le contenu de cet article.