根据HTML5 Canvas的三d动态性Chart图表的示例

2020-10-10 18:22 jianzhan

发现如今工业生产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,有更多你想不到的实际效果能迅速完成哦~

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。