没有合适的资源?快使用搜索试试~ 我知道了~
基于HTML5 Canvas的3D动态Chart图表的示例
2 下载量 74 浏览量
2020-12-14
05:45:05
上传
评论
收藏 81KB PDF 举报
温馨提示
试读
2页
发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易做不成美丽的。。。看到有一个网站上在卖的图表,感觉挺好看的,就用 HT for Web 3D 做了一个小例子,挺简单的,也挺好看的,哈哈~ 动态效果图如下: 这个例子用 HT 实现真的很容易,首先创建一个 HT 中最基础的 dm 数据模型,然后将数据模型添加进 g3d 3d 组件中,再设置 3d 中的视角并把 3d 组件添加进 body 元素中: dm = new ht.DataModel()
资源推荐
资源详情
资源评论
基于基于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,
资源评论
weixin_38748740
- 粉丝: 4
- 资源: 940
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功