视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Canvas如何做出3D动态的Chart图表
2020-11-27 15:05:47 责编:小采
文档
这次给大家带来Canvas如何做出3D动态的Chart图表,Canvas做出3D动态的Chart图表注意事项有哪些,下面就是实战案例,一起来看一下。

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

动态效果图如下:

这个例子用 HT 实现真的很容易,首先创建一个 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';

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

里层的节点非常容易,我直接用的 HT 封装的 ht.Node 创建了一个新的节点对象,然后通过 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 自定义的一个 3d 模型,可参考 HT for Web 建模手册:

cylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);

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

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

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 文字需要一个 json 格式的 typeface 字体,然后通过 ht.Default.loadFontFace 来加载 json 格式的字体到内存中,详情请参考 HT for Web 3D 手册:

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);
 text.s({
 'shape3d' : 'text',
 'shape3d.text': node.a('myHeight')+'%',
 'shape3d.text.curveSegments': 1,
 '3d.movable': false
 });
});

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

最后,要动态的变化 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,有更多你想不到的效果能快速实现哦~

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

H5读取文件并上传到服务器的方法

select下拉框的右边怎么增加提示图标

下载本文
显示全文
专题