本文介绍了使用HTML5实现的矢量卡片式组织结构图，通过twaver库展示上下层级的经典布局，并重点讲解如何创建带有圆角矩形和图片的网元，模仿名片效果来呈现组织图的成员，实现矢量和位图的结合，提供了一种视觉效果出众的展示方式。
组织结构图（Organization chart）是企业的流程运转、部门设置及职能规划等最基本的结构依据。和客户交流时，不少人都提到需要一个灵活的工具来绘制呈现企业的组织架构，今天就给大家带来一款用TWaver实现的组织结构图，提供多种布局方式，为了清晰呈现组织里每个人的职能，我们定制了名片样式来展示网元。
首先来看下整体效果。
先来一个经典的上下层级布局：
再来一个圆形布局：
这些布局用twaver来实现是非常的合适，实现起来也是很容易，twaver内部就提供了多种布局方式：自左向右，从下向上，具体可以看twaver
最低0.47元/天 解锁文章
扫一扫
1868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
