3D动态Chart绘制秘诀大揭秘！轻松搞定数据可视化问题

HTML5 Canvas与3D动态Chart图表

你好现在，需要处理的工业控制和电信网络管理图表真不少，咱们要学点儿画专业图的技巧。比如，Echart这样的工具就很好使，但有时候也可能不太适合。别担心，这儿给你透露一个自绘3D动态图表的秘诀，保准能帮你搞定数据可视化问题！

HT for Web 3D的应用

突然想搞个图标玩玩？无意中发现一个网站模板太酷炫了，于是试着用HT for Web 3D来勾画一下。其实用HT做这个超简单，先创建个HT模子，再丢给3D设备调整视角就行。最后把生成的3D玩意儿嵌入网页元素，大功告成！

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);
g3d.setEye(0, 185, 300);
g3d.addToDOM();
g3d.getView().style.background = '#000';

创建Chart图表条

想让你的图表变得炫酷有趣？快来试试下面这个妙招！先画好五条漂亮的曲线图，别急着结束。接下来，我们需要在其中的一条线上画一个小点，外面用透明点盖住它，底部再加上一些百分比数字。瞬间，3D效果就出来！这个小巧的透明点用谷歌Web前端库的ht.Node就能轻松搞定。然后，稍微调整下外观会更美观。最后别忘了为每个节点添加上“shape3d:cylinderModel”样式，这样你的3D模型就高大上了！

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);

外部透明节点与3D文字

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

让外面的“壳”和里面的节点一模一样？很简单，只要把”shape3d.transparent”设成真，再调调”shape3d.opacity”亮度就行了。想看看立体文字吗？先准备个JSON格式的字库文件，再用ht. Default. loadFontFace一弄，加载进去就能用！

动态变化与动画效果

你想让图里的数字动起来吗？用个小动画就搞定！关键是要确定3D文字里的数字保持实时更新，那就厉害了。作者巧妙利用“myHeight”这个自定义属性为数据找到了新家，让整张图活泼生动起来，用户体验瞬间提升！

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);

结语与进一步探索

制作好看又实用的图表真的挺简单的呐！后面肯定还有好多好玩儿的事情等着你~有啥不懂的尽管提问，我们随时候着！别忘了去看看我们的官方使用手册HT for Web，里面肯定有你喜欢的那味儿！

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
    });
});

。