发现如今工业生产SCADA上或电信网管层面用图表的非常多，尽管绝绝大多数人在图表制做层面用的是echarts，他的确功能强大，可是一些情况下大家不可以启用其他软件，这个情况下就得自身写这些漂亮的图表了，但是图表随便做不了漂亮的。。。看到有1个网站上在卖的图表，觉得挺漂亮的，就用 HT for Web 三d 做了1个小事例，挺简易的，也挺漂亮的，哈哈~
动态性实际效果图以下：
这个事例用 HT 完成真的很非常容易，最先建立1个 HT 中最基本的 dm 数据信息实体模型，随后将数据信息实体模型加上进 g3d 3d 组件中，再设定 3d 中的视角并把 3d 组件加上进 body 元素中：
dm = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dm); g3d.setEye(0, 185, 300); g3d.addToDOM(); g3d.getView().style.background = '#000';
接着便是造这5个chart图表条了，我的思路是这样的，里层有1个连接点，外层1个全透明的连接点，底部1个 3d 的文本显示信息当今的百分比。
里层的连接点十分非常容易，我立即用的 HT 封裝的 ht.Node 建立了1个新的连接点目标，随后根据 node.s 方式来设定 node 连接点的款式：
var node = new ht.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(node);
在其中要表明的是，'shape3d':cylinderModel 这个款式的设定，最先，shape3d 特性特定显示信息为 3d 实体模型的标志实际效果，cylinderModel 是用 HT 自定的1个 3d 实体模型，可参照 HT for Web 模型手册：
cylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);
随后设定了1个动态性转变的特性 myHeight，在 HT 中，node.a 方式是预留给客户储存业务流程数据信息的，大家能够在这边加上随意好几个特性。
接下来大家要建立的是外界的全透明连接点，这个连接点的结构方法基础上与內部连接点同样，便是多了1点“全透明”的款式设定：
var cNode = new ht.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 文本必须1个 json 文件格式的 typeface 字体样式，随后根据 ht.Default.loadFontFace 来载入 json 文件格式的字体样式到运行内存中，详细信息请参照 HT for Web 三d 手册：
ht.Default.loadFontFace('./wenquanyi.json', function(){
//......
var text = new ht.Node();
text.s3([5, 5, 5]);
text.p3(cNode.p3()[0]⑸, ⑴0, 0);
dm.add(text);
text.s({
'shape3d' : 'text',
'shape3d.text': node.a('myHeight')+'%',
'shape3d.text.curveSegments': 1,
'3d.movable': false
});
});
由于大家用的 typeface 字体样式的绘图方法是无数个3角形组成的1个字，会占有很大的运行内存，因此我把图型的曲线图的细致度调得较低，可是還是很清楚，假如你们能寻找特性更好的字体样式，可使用而且告之我1下，大家现阶段没寻找占有运行内存小的字体样式。
最终，要动态性的转变 chart 图表格中的柱形图，大家得设定动漫，而且将 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” 就起到了决策性的功效，我用这个特性来储存自变量，并且能够随意变更自变量的值，这样就可以完成动态性关联的实际效果了。
也有不懂的能够留言，或立即去大家官方网站上查询手册 HT for Web，有更多你想不到的实际效果能迅速完成哦~
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 上线了小程序官网_年会抽奖小程序免费_做小程序_小程序网站_跑腿小程序 版权所有 （网站地图） 粤ICP备10235580号