从左到右更改组织结构图方向

时间:2016-10-06 18:57:47

标签: javascript jquery html css orgchart

我需要更改下面图表的方向,使其从左到右显示,而不是从上到下的当前方向。是否可以通过使用行跨度而不是col span来实现此目的。在从上到下的方法中,使用col span完成所有操作,因此我假设从左到右可以使用行Span完成,但我无法启动。

enter image description here

我目前的代码css是:

<Target Name="BeforeCompile" Condition="exists('app.$(Configuration).config')">

HTML正文中的当前代码是:

div.orgChart table {
    width                 : 100%;
}

div.orgChart tr.lines td.line {
    width                 : 1px;
    height                : 20px;
}

div.orgChart tr.lines td.top {
    border-top            : 1px solid black;    /*dashed*/
}

div.orgChart tr.lines td.left {
    border-right          : 1px solid black;
}

div.orgChart tr.lines td.right {
    border-left           : 0px solid black;
}

div.orgChart tr.lines td.half {
    width                 : 50%;
}


div.orgChart td {
    text-align            : center;
    vertical-align        : top;
    padding               : 0px 2px;
}

2 个答案:

答案 0 :(得分:1)

GetOrgChart有从左到右的方向选项。请参阅以下示例:

http://www.getorgchart.com/Demos/Orientation

您可以根据需要自定义节点

答案 1 :(得分:0)

我使用d3.js库来开发自己的组织结构图。有一些工作示例可以使用D3中的树布局来实现这一目的。