最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 基于HTML5 Canvas实现的3D动态Chart图表_html5教程


    这篇文章主要介绍了基于HTML5 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,有更多你想不到的效果能快速实现哦~

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注liyege!

    相关推荐:

    如何利用canvas实现按住鼠标移动绘制出轨迹

    用HTML5
    Canvas来绘制三角形和矩形等多边形的方法

    JS和CSS实现渐变背景特效的代码

    以上就是基于HTML5 Canvas实现的3D动态Chart图表的详细内容,

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 1009会员总数(位)
    • 111838资源总数(个)
    • 7本周发布(个)
    • 0 今日发布(个)
    • 210稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    侵权联系邮箱[email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐