是否可以用组织结构图(巴尔干图)制作如下组织结构图?
Is it possible to make the organization chart as follows with the organization chart (Balkan chart)?
是否可以使用 Orgchart(巴尔干图)制作如下图 link 的组织结构图?
查看 API 我找不到解决方案。
https://drive.google.com/file/d/1zQHyP8MDP9gkKvOAbSiKPmJObjIUCpn0/view?usp=sharing
BALKANGraph 此处为开发人员布道师
基本上你需要用辅助标签标记4个节点
var chart = new OrgChart(document.getElementById("tree"), {
template: "ula",
layout: BALKANGraph.mixed,
nodeMenu: {
pdf: { text: "Export PDF" },
png: { text: "Export PNG" },
svg: { text: "Export SVG" }
},
collapse: {
level: 2
},
nodeBinding: {
field_0: "name",
field_1: "title",
img_0: "img"
},
nodes: [
{ id: "1", name: "Jack Hill", title: "Chairman and CEO", email: "amber@domain.com", img: "https://balkangraph.com/js/img/1.jpg" },
{ id: "2", pid: "1", name: "Lexie Cole", title: "QA Lead", email: "ava@domain.com", img: "https://balkangraph.com/js/img/2.jpg" },
{ id: "3", pid: "1", name: "Janae Barrett", title: "Technical Director", img: "https://balkangraph.com/js/img/3.jpg" },
{ id: "4", pid: "1", name: "Aaliyah Webb", title: "Manager", email: "jay@domain.com", img: "https://balkangraph.com/js/img/4.jpg" },
{ id: "5", pid: "2", name: "Elliot Ross", title: "QA", img: "https://balkangraph.com/js/img/5.jpg" },
{ id: "6", pid: "2", name: "Anahi Gordon", title: "QA", img: "https://balkangraph.com/js/img/6.jpg" },
{ id: "7", pid: "2", name: "Knox Macias", title: "QA", img: "https://balkangraph.com/js/img/7.jpg" },
{ id: "8", pid: "3", name: "Nash Ingram", title: ".NET Team Lead", email: "kohen@domain.com", img: "https://balkangraph.com/js/img/8.jpg" },
{ id: "9", pid: "3", name: "Sage Barnett", title: "JS Team Lead", img: "https://balkangraph.com/js/img/9.jpg" },
{ id: "10", pid: "8", name: "Alice Gray", title: "Programmer", img: "https://balkangraph.com/js/img/10.jpg" },
{ id: "11", pid: "8", name: "Anne Ewing", title: "Programmer", img: "https://balkangraph.com/js/img/11.jpg" },
{ id: "12", pid: "9", name: "Reuben Mcleod", title: "Programmer", img: "https://balkangraph.com/js/img/12.jpg" },
{ id: "13", pid: "9", name: "Ariel Wiley", title: "Programmer", img: "https://balkangraph.com/js/img/13.jpg" },
{ id: "14", pid: "4", name: "Lucas West", title: "Marketer", img: "https://balkangraph.com/js/img/14.jpg" },
{ id: "15", pid: "4", name: "Adan Travis", title: "Designer", img: "https://balkangraph.com/js/img/15.jpg" },
{ id: "16", pid: "4", name: "Alex Snider", title: "Sales Manager", img: "https://balkangraph.com/js/img/16.jpg" },
{ id: "101", pid: "1", tags: ["assistant"], name: "Blair White", title: "Assitant", img: "https://balkangraph.com/js/img/13.jpg" },
{ id: "102", pid: "1", tags: ["assistant"], name: "Nicky Fraser", title: "Assitant", img: "https://balkangraph.com/js/img/14.jpg" },
{ id: "103", pid: "1", tags: ["assistant"], name: "Skyler Lewis", title: "Assitant", img: "https://balkangraph.com/js/img/15.jpg" },
{ id: "104", pid: "1", tags: ["assistant"], name: "Gabby Cline", title: "Assitant", img: "https://balkangraph.com/js/img/16.jpg" }
]
});
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
font-family: Helvetica;
}
#tree {
width: 100%;
height: 100%;
}
.node.assistant line {
stroke: #F57C00;
}
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"></div>
是否可以使用 Orgchart(巴尔干图)制作如下图 link 的组织结构图? 查看 API 我找不到解决方案。
https://drive.google.com/file/d/1zQHyP8MDP9gkKvOAbSiKPmJObjIUCpn0/view?usp=sharing
BALKANGraph 此处为开发人员布道师
基本上你需要用辅助标签标记4个节点
var chart = new OrgChart(document.getElementById("tree"), {
template: "ula",
layout: BALKANGraph.mixed,
nodeMenu: {
pdf: { text: "Export PDF" },
png: { text: "Export PNG" },
svg: { text: "Export SVG" }
},
collapse: {
level: 2
},
nodeBinding: {
field_0: "name",
field_1: "title",
img_0: "img"
},
nodes: [
{ id: "1", name: "Jack Hill", title: "Chairman and CEO", email: "amber@domain.com", img: "https://balkangraph.com/js/img/1.jpg" },
{ id: "2", pid: "1", name: "Lexie Cole", title: "QA Lead", email: "ava@domain.com", img: "https://balkangraph.com/js/img/2.jpg" },
{ id: "3", pid: "1", name: "Janae Barrett", title: "Technical Director", img: "https://balkangraph.com/js/img/3.jpg" },
{ id: "4", pid: "1", name: "Aaliyah Webb", title: "Manager", email: "jay@domain.com", img: "https://balkangraph.com/js/img/4.jpg" },
{ id: "5", pid: "2", name: "Elliot Ross", title: "QA", img: "https://balkangraph.com/js/img/5.jpg" },
{ id: "6", pid: "2", name: "Anahi Gordon", title: "QA", img: "https://balkangraph.com/js/img/6.jpg" },
{ id: "7", pid: "2", name: "Knox Macias", title: "QA", img: "https://balkangraph.com/js/img/7.jpg" },
{ id: "8", pid: "3", name: "Nash Ingram", title: ".NET Team Lead", email: "kohen@domain.com", img: "https://balkangraph.com/js/img/8.jpg" },
{ id: "9", pid: "3", name: "Sage Barnett", title: "JS Team Lead", img: "https://balkangraph.com/js/img/9.jpg" },
{ id: "10", pid: "8", name: "Alice Gray", title: "Programmer", img: "https://balkangraph.com/js/img/10.jpg" },
{ id: "11", pid: "8", name: "Anne Ewing", title: "Programmer", img: "https://balkangraph.com/js/img/11.jpg" },
{ id: "12", pid: "9", name: "Reuben Mcleod", title: "Programmer", img: "https://balkangraph.com/js/img/12.jpg" },
{ id: "13", pid: "9", name: "Ariel Wiley", title: "Programmer", img: "https://balkangraph.com/js/img/13.jpg" },
{ id: "14", pid: "4", name: "Lucas West", title: "Marketer", img: "https://balkangraph.com/js/img/14.jpg" },
{ id: "15", pid: "4", name: "Adan Travis", title: "Designer", img: "https://balkangraph.com/js/img/15.jpg" },
{ id: "16", pid: "4", name: "Alex Snider", title: "Sales Manager", img: "https://balkangraph.com/js/img/16.jpg" },
{ id: "101", pid: "1", tags: ["assistant"], name: "Blair White", title: "Assitant", img: "https://balkangraph.com/js/img/13.jpg" },
{ id: "102", pid: "1", tags: ["assistant"], name: "Nicky Fraser", title: "Assitant", img: "https://balkangraph.com/js/img/14.jpg" },
{ id: "103", pid: "1", tags: ["assistant"], name: "Skyler Lewis", title: "Assitant", img: "https://balkangraph.com/js/img/15.jpg" },
{ id: "104", pid: "1", tags: ["assistant"], name: "Gabby Cline", title: "Assitant", img: "https://balkangraph.com/js/img/16.jpg" }
]
});
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
font-family: Helvetica;
}
#tree {
width: 100%;
height: 100%;
}
.node.assistant line {
stroke: #F57C00;
}
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"></div>