使用JavaScript InfoVis Toolkit展现组织结构图

JavaScript InfoVis Toolkit是一个js开发的图表控件库（以下简称JIT）。不知道为何被gfw了。看不到官网可以到此地址看demo

http://flashcanvas.net/examples/thejit.org/demos/

 

JIT提供了几种特别的图表形式，是一般js或flash图表控件所没有的，比如：

个人觉得那些花里胡哨的其实用处也不大，但是组织结构在某些时候还是很需要的。我恰巧遇到一个需要展现组织结构的功能，在网上找了很长时间

google也有一个组织结构的，不过功能稍逊，http://code.google.com/intl/zh-CN/apis/chart/interactive/docs/gallery/orgchart.html

 

JIT space tree 采用json数据源，可选择子节点在根节点的上下左右4种形式。

默认提供了几种连线 line arrow 等，但默认没有 折线形式。不过JIT提供了对node和edge的扩展。可以扩展节点和连线

 

node事实上是div，可以通过css来控制样式，可以通过jquery来控制里面的内容

  1: $jit.ST.Plot.EdgeTypes.implement({

  2:     'line1': {

  3:         'render': function (node, canvas) {

  4:             var w = $("#"+node.id).width();

  5:             var h = $("#" + node.id).height();

  6:             //从from node到 to node

  7:             var from = node.nodeFrom;

  8:             var to = node.nodeTo;

  9:                             

 10:             var fx = from.pos.x;

 11:             var fy = from.pos.y + h / 2;

 12: 

 13:             var tx = to.pos.x;

 14:             var ty = to.pos.y - h / 2;

 15: 

 16:             var hdis = ty - fy;

 17:             //起始节点的竖线

 18:             var s1sx = fx;

 19:             var s1sy = fy;

 20:             var s1ex = fx;

 21:             var s1ey = s1sy + hdis / 2;

 22:             //目的节点竖线

 23:             var s2ex = tx;

 24:             var s2ey = ty;

 25:             var s2sx = tx;

 26:             var s2sy = s2ey - hdis / 2;

 27:             //横线

 28:             var hsx = s1ex;

 29:             var hsy = s1ey;

 30:             var hex = s2sx;

 31:             var hey = s2sy;

 32: 

 33:             this.edgeHelper.line.render({ x: s1sx, y: s1sy }, { x: s1ex, y: s1ey }, canvas);

 34:             this.edgeHelper.line.render({ x: hsx, y: hsy }, { x: hex, y: hey }, canvas);

 35:             this.edgeHelper.line.render({ x: s2sx, y: s2sy }, { x: s2ex, y: s2ey }, canvas);

 36:         }

 37:     }

 38: });

 

line1是名字，随便起。

在之后调用中

Edge: {
    type: 'line1',
    overridable: true
}

type名称和扩展的名称一样即可

 以上只是top形式，其他形式对坐标的计算不同

附上从官网下的 js包和api文档

jit-2.0.1  api文档 折线扩展