基于HTML5画布的动态三维图表的一个实例

现在，SCADA或电信网络管理工业用图特别多，虽然人在ECharts排行榜的绝大多数，他真的很好，但有时我们不能调用另一个插件，这个时候会写这些美图吧，但不要成为美丽的图表上看到的…图表销售网站，感觉不错，使用HT Web 3D做的一个小例子，很简单，很好，哈哈。

动态效果图如下：

这个例子很容易用HT实现。首先，在HT创建最基本的数据模型，然后将数据模型转化为G的3D组件，然后设置三维透视和人体元素添加3D组件。

DM =新ht.datamodel（）；
G =新ht.graph3d.graph3dview（DM）；
（0, 185, 300）g3d.seteye；
g3d.addtodom（）；
g3d.getview（）。style.background =000#；

下一步是创建这五个图表。我的想法是，在内层有一个节点，外层是一个透明节点，底部的一个3D文本显示当前百分比。

内层的节点非常容易。我创建的HT封装的HT节点直接创建一个新的节点对象，然后通过节点S设置节点节点的样式。

var节点=新HT Node（）；
节点s（{
3D：筒体分析模型，
它。颜色：彩色，
3D，可移动：false
}）；
节点A（{
myheight：S3 { 1 }，
}）；
node.p3（{ P3 { 0 }，S3 { 1 } / 2，P3 { 2 } }）；
node.s3（S3）；
Dm.add（节点）；

说明：设置of'shape3d筒体分析模型，首先，它的属性指定图标的效果，显示为3D模型。筒体分析模型是一个由HT 3D模型定制。它可以参考HT的Web建模手册。

筒体分析模型= ht.default.createcylindermodel（1000, 0, 1000，假，假，真的，真的）；

然后，我们建立了一个动态属性myheight。在HT中，节点A被保留为用户存储业务数据。我们可以在这里添加更多的属性。

接下来，我们要创建一个外部透明节点，它基本上与内部节点的构建方式相同，也就是说，有点透明；

var CNODE方法=新的HT。Node（）；
CNode：（{
3D：筒体分析模型，
透明：真正的3D，
它不透明度：0.2，
'的标签。颜色：# FFF，
3D，可移动：false
}）；
cnode.p3（{ P3 { 0 }，50，P3 { 2 } }）；
（20, 100, 20）cnode.s3；
Dm.add（CNODE方法）；

建立&lsquo；shape3d.transparentrsquo；真实，然后建立&lsquo；shape3d.opacityrsquo；透明度。

最后，三维文本。3D文字需要一个JSON格式字体字体，然后ht.default.loadfontface加载JSON格式字体的记忆。欲了解更多详情，请参阅HT的Web三维手册：

Ht.Default.loadFontFace（'。 /文泉驿。JSON，函数（）{（）{
/……
Node（）；
text.s3（{ 5, 5, 5 }）；
text.p3（cnode.p3（）{ 0 } - 5 - 10, 0）；
Dm.add（文本）；
文本（s）
3D中的，
它。文本：节点，（'myheight '）+%，
3D文本。三：1，
3D，可移动：false
}）；
}）；

因为我们使用的字体字体渲染是一个无数个三角形的单词，占用了大量的内存，所以我把微调曲线的模式降低了，但是还是很清楚的，如果你能找到一个性能更好的字体可以使用并告诉我，我们找不到小的内存字体。

最后，要动态地改变图表中的列图，我们必须同时设置动画并更新3D字体。

setInterval（）{（）函数（
如果（节点。一个（'myheight）＜100）{
结。一（'myheight '，（（node.getattr（'myheight '）+ 1））；
node.s3（20，节点，（'myheight '），20）；
node.p3（P3 { 0 }，节点，（'myheight '） / 2，P3 { 2 }）；
其他{ }
结。一（'myheight '，0）；
node.s3（{ 20, 0, 20 }）；
node.p3（{ P3 { 0 }，0，P3 { 2 } }）；
}
如果（文本）文本的（'shape3d。文本节点，（'myheight '）+%）；
}，100）；

在这里，我的自定义属性myheight它起着决定性的作用；我用这个属性来存储变量，我可以随意改变变量的值，从而实现动态绑定的影响。

还是不明白留言，或者直接去我们的官网查看HT的网址手册，比你想不起来的效果能很快实现哦~

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。