基于HTML5Canvas实现的3D动态Chart图表--百分百源码网

基于HTML5Canvas实现的3D动态Chart图表-

发布时间：09/01 来源：未知浏览：关键词：

这篇文章主要介绍了基于HTML5Canvas的3D动态Chart图表的示例,内容挺不错的，此刻分享给大家，也给大家做个参照。这篇文章主要介绍了基于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，有更多你想不到的结果能迅速实现哦~

以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相干内容请关注百分百源码网！

打赏