发现工业SCADA或电信网络管理中使用的图表有很多。虽然大多数人在图表制作中使用echarts，确实很好用，但是有时候我们不能调用其他插件，这时候就得自己写这些漂亮的图表，但是图表又不是那么容易做的漂亮。..看到网站上卖的图，觉得挺好看的，就用HTforWeb3D做了个小例子，挺简单好看的，哈哈~演示地址：http://www.高拓扑。com/demo/...动态效果图如下：这个例子用HT实现起来真的很简单。首先在HT中创建一个基本的dm数据模型，然后将数据模型添加到g3d3d组件中，然后设置3dView并为body元素添加3d组件：dm=newht.DataModel();g3d=newht.graph3d.Graph3dView(dm);g3d.setEye(0,185,300);g3d.addToDOM();g3d.getView().style.background='#000';下一步是创建这五个图表栏。我的想法是这样的。内层有一个节点，外层有一个透明节点，底部有一个3D文字显示当前百分比。内层的节点很容易。我直接使用HT封装的ht.Node新建一个node对象，然后使用node.s方法设置node节点的样式：varnode=newht.Node();node。s({'shape3d':cylinderModel,'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(节点);需要说明的是'shape3d':cylinderModel样式的设置，首先，shape3d属性指定显示为3d模型的图标效果，cylinderModel是HT自定义的3d模型，请参考HTforWeb建模手册:cylinderModel=ht.Default.createCylinderModel(1000,0,1000,false,false,true,true);然后设置一个动态变化的属性myHeight。在HT中，node.a方法是留给用户存储业务数据的，我们可以在这里添加任意数量的属性。接下来我们要创建的是外部??透明节点。这个节点的构造方法和内部节点基本一样，就是多了一点“透明”的样式设置：varcNode=newht.Node();cNode.s({'shape3d':cylinderModel,'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);首先将'shape3d.transparent'设置为true，然后设置'shape3d.opacity'透明度。最后，还有3D文本。渲染3D文字需要一个json格式的字体字体，然后通过ht.Default.loadFontFace将json格式的字体加载到内存中。详见HTforWeb3D手册：ht.Default.loadFontFace('./wenquanyi.json',function(){//......vartext=newht.Node();text.s3([5,5,5]);text.p3(cNode.p3()[0]-5,-10,0);dm.add(text);text.s({'shape3d':'text','shape3d.text':node.a('myHeight')+'%','shape3d.text.curveSegments':1,'3d.movable':false});});因为绘制方法为我们使用的字体字体是由无数个三角形组成的一个字，会占用大量内存，所以我调低了图形曲线的精细度，但还是很清晰的。如果你能找到性能更好的字体，你可以使用它并告诉我。我们还没有找到占用内存更少的字体。最后，要动态更改图表图表中的直方图，我们必须设置动画并同步更新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]);node.p3([p3[0],0,p3[2]]);}if(text)text.s('shape3d.text',node.a('myHeight')+'%');},100);在这里，我自定义的属性“myHeight”起着决定性的作用。我用这个属性来存储变量，变量的值可以任意改变，这样就可以达到动态绑定的效果。如果还有不明白的可以留言，或者直接上我们官网查看说明书HTforWeb，还有更多你想不到的效果可以快速实现~
