How to use H5 Canvas to implement 3D dynamic Chart

这次给大家带来怎样用H5 Canvas实现3D动态Chart图表，用H5 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(&#39;myHeight&#39;) < 100){
        node.a(&#39;myHeight&#39;, (node.getAttr(&#39;myHeight&#39;)+1));
    node.s3(20, node.a(&#39;myHeight&#39;), 20);
    node.p3(p3[0], node.a(&#39;myHeight&#39;)/2, p3[2]);
    }else{
        node.a(&#39;myHeight&#39;, 0);
    node.s3([20, 0, 20]);
    node.p3([p3[0], 0, p3[2]]);
    }
    if (text) text.s(&#39;shape3d.text&#39;, node.a(&#39;myHeight&#39;)+&#39;%&#39;);
}, 100);

这里，我自定义的属性 “myHeight” 就起到了决定性的作用，我用这个属性来存储变量，而且可以任意更改变量的值，这样就能实现动态绑定的效果了。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

有关HTML5页面在iPhoneX适配问题

怎样给HTML元素设置焦点

如何用html的title属性实现鼠标悬停显示文字

The above is the detailed content of How to use H5 Canvas to implement 3D dynamic Chart. For more information, please follow other related articles on the PHP Chinese website!