ฉันพบว่ามีแผนภูมิมากมายในการจัดการเครือข่ายอุตสาหกรรมหรือการสื่อสารโทรคมนาคม แผนภูมิสามารถทำสิ่งที่สวยงามได้อย่างง่ายดาย แก่นแท้ แก่นแท้ เห็นแผนภูมิที่ขายบนเว็บไซต์มันค่อนข้างดี
การเรนเดอร์แบบไดนามิกมีดังนี้:
ตัวอย่างนี้เป็นเรื่องง่ายที่จะใช้ HT
dm = ใหม่ ht.datamodel ();
ถัดไปคือการสร้างชาร์ตทั้งห้านี้
โหนดเลเยอร์ด้านในนั้นง่ายมาก
var node = new ht.node (); node.s ({'shape3d': cylindermodel, 'shape3d.color': สี, '3d.movable': false}); node.a ({'myheight': s3 [ 1],});ควรอธิบายว่าการตั้งค่า 'shape3d': cylindermodel ::
CylinderModel = ht.default.createCylindermodel (1,000, 0, 1,000, เท็จ, เท็จ, จริง, จริง, จริง);
จากนั้นตั้งค่าคุณลักษณะการเปลี่ยนแปลงแบบไดนามิก MyHeight
ต่อไปเราต้องสร้างโหนดโปร่งใสภายนอก
var cnode = new ht.node (); #fff ',' 3d .Movable ': false}); cnode.p3 ([p3 [0], 50, p3 [2]]; cnode.s3 (20, 100, 20);
ตั้งค่า 'shape3d.transparent' เป็นจริงจากนั้นตั้งค่าความโปร่งใสของ 'shape3d.opcity'
ในที่สุดข้อความ 3D ซึ่งแสดงตัวอักษรตัวอักษรในรูปแบบ JSON จากนั้นโหลดฟอร์แมตฟอร์แมต JSON ไปยังหน่วยความจำโดย ht.default.load.load.load.load.loadfontface
ht.default.loadfontface ('./ wenquanyi.json', function () {// ...... var text = new ht.node (); text.s3 ([5, 5, 5]); ข้อความ .p3 (cnode.p3 () [0] -5, -10, 0); 'myheight')+'%', 'shape3d.text.curvesegments': 1, '3d.movable': false});});เนื่องจากวิธีการวาดรูปแบบอักษรตัวอักษรที่เราใช้เป็นคำที่ประกอบด้วยสามเหลี่ยมนับไม่ถ้วนซึ่งจะครอบครองหน่วยความจำขนาดใหญ่ดังนั้นฉันจึงปรับความละเอียดของเส้นโค้งของกราฟิก แต่ก็ยังชัดเจนมาก แบบอักษรที่ดีสามารถใช้และบอกฉันได้
ในที่สุดเพื่อเปลี่ยนแผนภูมิเสาหลักในแผนภูมิแผนภูมิเราต้องตั้งค่าภาพเคลื่อนไหวและอัปเดตค่าของฟอนต์ 3 มิติพร้อมกัน:
setInterval (function () {if (node.a ('myheight') <100) {node.a ('myheight', (node.getattr ('myheight')+1)); node.s3 (20, โหนด a ('myheight'), 20); node.p3 (p3 [0], node.a ('myheight')/2, p3 [2]); Node.S3 ([20, 0, 20]); 'myHeight')+'%');}, 100);ที่นี่คุณลักษณะที่กำหนดเองของฉัน MyHeight มีบทบาทเด็ดขาด
หากคุณไม่เข้าใจคุณสามารถฝากข้อความหรือไปที่เว็บไซต์ทางการของเราโดยตรงเพื่อตรวจสอบ HT คู่มือสำหรับเว็บ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้