现在工业 SCADA 上或者电信网管方面用图表的特别多，虽然绝大部分人在图表制作方面用的是 echarts，他确实好用，但是有些时候我们不能调用别的插件，这个时候就得自己写这些美丽的图表了，然而图表轻易做不成美丽的。看到有一个网站上在卖的图表，感觉挺好看的，就用 HT for Web 3D 做了一个小例子，挺简单的，也挺好看的，哈哈~

Demo 地址： http://www.hightopo.com/demo/3DBar/index.html

动态效果图如下： 这个例子用 HT 实现真的很容易，首先创建一个 HT 中最基础的 dm 数据模型，然后将数据模型添加进 g3d (3d 组件)中，再设置 3d 中的视角并把 3d 组件添加进 body 元素中：

接着就是造这五个 chart 图表条了，我的思路是这样的，里层有一个节点，外层一个透明的节点，底部一个 3d 的文字显示当前的百分比。

里层的节点非常容易，我直接用的 HT 封装的 ht.Node 创建了一个新的节点对象，然后通过 node.s 方法来设置 node 节点的样式：

其中要说明的是，‘shape3d’:cylinderModel 这个样式的设置，首先，shape3d 属性指定显示为 3d 模型的图标效果，cylinderModel 是用 HT 自定义的一个 3d 模型，可参考 HT for Web 建模手册：

然后设置了一个动态变化的属性 myHeight，在 HT 中，node.a 方法是预留给用户存储业务数据的，我们可以在这边添加任意多个属性。

接下来我们要创建的是外部的透明节点，这个节点的构造方式基本上与内部节点相同，就是多了一点“透明”的样式设置：

要先设置 ‘shape3d.transparent’ 为 true，再设置 ‘shape3d.opacity’ 透明度。

最后是 3d 文字，呈现 3d 文字需要一个 json 格式的 typeface 字体，然后通过 ht.Default.loadFontFace 来加载 json 格式的字体到内存中，详情请参考 HT for Web 3D 手册：

因为我们用的 typeface 字体的绘制方式是无数个三角形构成的一个字，会占用很大的内存，所以我把图形的曲线的精细度调得较低，但是还是很清晰，如果你们能找到性能更好的字体，可以使用并且告知我一下，我们目前没找到占用内存小的字体。

最后，要动态的变化 chart 图表中的柱形图，我们得设置动画，并且将 3d 字体也同步更新数值：