Ich habe festgestellt, dass im industriellen SCADA- oder Telekommunikationsnetzwerkmanagement viele Diagramme verwendet werden. Obwohl die meisten Leute E-Charts für die Diagrammerstellung verwenden, können wir derzeit keine anderen Plug-Ins aufrufen müssen unsere eigenen schreiben. Das sind schöne Diagramme, aber Diagramme lassen sich nicht einfach schön machen. . . Ich habe auf einer Website ein Diagramm zum Verkauf gesehen und fand es ziemlich gut, also habe ich HT für Web 3D verwendet, um ein kleines Beispiel zu erstellen. Es war ziemlich einfach und hübsch, haha~
Das dynamische Rendering ist wie folgt:
Dieses Beispiel ist mit HT wirklich einfach zu implementieren. Erstellen Sie zunächst ein grundlegendes dm-Datenmodell in HT, fügen Sie dann das Datenmodell zur g3d-3D-Komponente hinzu, legen Sie dann die Perspektive in 3D fest und fügen Sie die 3D-Komponente zum Body-Element hinzu:
dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);g3d.setEye(0, 185, 300);g3d.addToDOM();g3d.getView().style.background = '# 000';
Der nächste Schritt besteht darin, diese fünf Diagrammbalken zu erstellen: Es gibt einen Knoten in der inneren Ebene, einen transparenten Knoten in der äußeren Ebene und einen 3D-Text unten, um den aktuellen Prozentsatz anzuzeigen.
Der innere Knoten ist sehr einfach. Ich verwende den von HT gekapselten ht.Node direkt, um ein neues Knotenobjekt zu erstellen, und lege dann den Stil des Knotenknotens über die Methode node.s fest:
var node = new ht.Node();node.s({ 'shape3d':zylinderModel, 'shape3d.color': color, '3d.movable': false});node.a({ 'myHeight': s3[ 1],});node.p3([p3[0], s3[1]/2, p3[2]]);node.s3(s3);dm.add(node);Was erklärt werden muss, ist die Einstellung des Stils „shape3d“:zylinderModel. Zunächst gibt das Attribut „shape3d“ den Symboleffekt an, der als 3D-Modell angezeigt wird. Weitere Informationen finden Sie im HT-Handbuch zur Webmodellierung :
zylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);
Dann wird ein sich dynamisch änderndes Attribut myHeight festgelegt. In HT ist die Methode node.a für Benutzer zum Speichern von Geschäftsdaten reserviert. Wir können hier eine beliebige Anzahl von Attributen hinzufügen.
Als nächstes müssen wir einen externen transparenten Knoten erstellen. Dieser Knoten ist im Wesentlichen auf die gleiche Weise aufgebaut wie der interne Knoten, außer dass er über etwas transparentere Stileinstellungen verfügt:
var cNode = new ht.Node();cNode.s({ 'shape3d':zylinderModel, 'shape3d.transparent': true, 'shape3d.opacity': 0.2, 'label.color': '#fff', '3d .movable': false});cNode.p3([p3[0], 50, p3[2]]);cNode.s3(20, 100, 20);dm.add(cNode);Um „shape3d.transparent“ zuerst auf „true“ zu setzen, legen Sie dann die Transparenz von „shape3d.opacity“ fest.
Schließlich gibt es noch 3D-Text. Zum Rendern von 3D-Text benötigen Sie eine Schriftart im JSON-Format. Weitere Informationen finden Sie im HT für Web 3D Handbuch:
ht.Default.loadFontFace('./wenquanyi.json', function(){ //...... var text = new ht.Node(); text.s3([5, 5, 5]); text .p3(cNode.p3()[0]-5, -10, 0); dm.add(text.s({ 'shape3d' : 'text', 'shape3d.text': node.a('myHeight')+'%', 'shape3d.text.curveSegments': 1, '3d.movable': false });});Da die von uns verwendete Schriftart so gezeichnet ist, dass ein Wort aus unzähligen Dreiecken besteht, was viel Speicher beansprucht, habe ich die Feinheit der grafischen Kurve auf ein niedrigeres Niveau eingestellt, aber es ist immer noch sehr klar Sie können eine bessere Leistung finden. Es können gute Schriftarten verwendet werden. Lassen Sie es mich wissen. Wir haben keine Schriftarten gefunden, die wenig Speicher beanspruchen.
Um schließlich das Balkendiagramm im Diagramm dynamisch zu ändern, müssen wir Animationen festlegen und die 3D-Schriftwerte synchron aktualisieren:
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]); node.a('myHeight', 0); node.s3([20, 0, 20]); node.p3([p3[0], 0, p3[2]]); s('shape3d.text', node.a('myHeight')+'%');}, 100);Dabei spielt mein benutzerdefiniertes Attribut myHeight eine entscheidende Rolle. Ich verwende dieses Attribut zum Speichern von Variablen, und der Wert der Variablen kann beliebig geändert werden, sodass der Effekt einer dynamischen Bindung erzielt werden kann.
Wenn Sie es immer noch nicht verstehen, können Sie eine Nachricht hinterlassen oder direkt auf unsere offizielle Website gehen, um das Handbuch HT für Web anzusehen. Es gibt noch mehr Effekte, die Sie sich nicht vorstellen können, die schnell erreicht werden können
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.