最近因为工作需要,使用js实现树状关系图,根据规范的数据格式,绘制或生成可折叠和可横向、纵向变化的树状关系图.
于是整理了两个js插件:GoogleCharts离线版Jit的SpaceTree.

GoogleCharts树型映射离线版

GoogleCharts

谷歌的这个干净利索,但是由于需要在线调用谷歌api,由于谷歌在国内的访问实在蛋疼,所以只能提取离线版.
网上找到了CHRISTEN’S BLOG制作的离线版:离线使用 Google Charts ,可惜,并不包含有树型映射.

于是就自己动手丰衣足食了.抓包提取资源文件,并加以整理,处于时间原因,没有jsoops中的那样整合,只是做了单纯的css和js文件整理,也算是能正常的离线使用了.

下载GoogleCharts树型映射离线版: 点击这里

Jit中的SpaceTree

JitSpaceTree

由于上面的GoogleChart只能使用纵向的树状图,而横向的树状图是另一个控件(而且横向的控件真心觉得很丑_(:з」∠)__)
所以还找了另一个树状图控件:SpaceTree.这个是Jit包里的,本人只是提取其中的树状关系图控件然后稍加整理(同上).

下载SpaceTree: 点击下载

完整的Jit-2.0.1.zip包: 点此下载

另:以上插件均支持Chrome,Firefox和IE7~11
(不要和我提IE6 (╯°Д°)╯︵ ┻━┻)

参考链接:
使用Javascript来实现的超炫组织结构图(Organization Chart)

JavaScript InfoVis Toolkit

如未特殊注明,本站文章均为原创

转载请注明:转载自quericy的博客(https://quericy.me)

本文链接地址: 两个好用的树状关系图JS插件