与母亲和父亲（或父母夫妇）的家谱
我需要创建一个家谱图（不完全像图像1，但相似），它应该包含父亲和母亲（或任何其他）关系，。
在图像2上，您可以看到一个组织结构图，它可以解决我的问题，但我没有＆＃34;情侣＆＃34;关系。例如Father - Mother / Grandfather - GrandMother，而不是parents。我需要＆＃34;父母＆＃34;阻止两个相互关联的块，一个是＃34;母亲＆＃34;和另一个父亲＆＃34; （或任何有关的夫妻）。
目前，我已经看到了很多组织结构图（例如Google Chart或jOrgChart），而不是＆＃34;系列＆＃34;树。
你能建议一个库，脚本，操作方法，想法或其他什么来解决这个问题吗？
（抱歉，如果这令人困惑。如果需要附加信息来帮助我解决这个问题，请在评论中提问）
3 个答案:
答案 0 :(得分：1)
我建议您使用JavaScript和jQuery小部件BasicPrimitives，更多信息here。它具有您需要的功能，可以显示多对多关系。
答案 1 :(得分：0)
这里是基于人与人之间关系实现家庭图的代码示例。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>The very first family chart</title>
<link rel="stylesheet" href="demo/js/jquery/ui-lightness/jquery-ui-1.10.2.custom.css" />
<script type="text/javascript" src="demo/js/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="demo/js/jquery/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="demo/js/primitives.min.js?219"></script>
<link href="demo/css/primitives.latest.css?219" media="screen" rel="stylesheet" type="text/css" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function () {
var options = new primitives.famdiagram.Config();
var items = [
{ id: 1, title: "1", description: "", image: "demo/images/photos/m.png" },
{ id: 2, title: "2", description: "", image: "demo/images/photos/f.png" },
{ id: 3, title: "3", description: "",image: "demo/images/photos/m.png" },
{ id: 4, title: "4", description: "", image: "demo/images/photos/f.png" },
{ id: 5, parents: [1, 2], title: "5", description: "", image: "demo/images/photos/m.png" },
{ id: 6, parents: [3, 4], title: "6", description: "", image: "demo/images/photos/f.png" },
{ id: 8, parents: [5, 6], title: "8", description: "", image: "demo/images/photos/m.png" },
{ id: 7, parents: [5, 6], title: "7", description: "7", image: "demo/images/photos/f.png" },
{ id: 9, title: "9", description: "", image: "demo/images/photos/f.png" },
{ id: 12, title: "12", description: "", image: "demo/images/photos/m.png" },
{ id: 10, parents: [8, 9], title: "10", description: "", image: "demo/images/photos/m.png" },
{ id: 11, parents: [8, 9], title: "11", description: "", image: "demo/images/photos/f.png" },
{ id: 13, parents: [7, 12], title: "13", description: "", image: "demo/images/photos/m.png" },
{ id: 14, parents: [7, 12], title: "14", description: "", image: "demo/images/photos/f.png" }
];
options.pageFitMode = 0;
options.items = items;
options.cursorItem = 2;
options.linesWidth = 1;
options.linesColor = "black";
options.hasSelectorCheckbox = primitives.common.Enabled.False;
options.normalLevelShift = 20;
options.dotLevelShift = 20;
options.lineLevelShift = 20;
options.normalItemsInterval = 10;
options.dotItemsInterval = 10;
options.lineItemsInterval = 10;
options.defaultTemplateName = "info";
options.templates = [getInfoTemplate()];
options.onItemRender = onTemplateRender;
jQuery("#basicdiagram").famDiagram(options);
});//]]>
function onTemplateRender(event, data) {
switch (data.renderingMode) {
case primitives.common.RenderingMode.Create:
/* Initialize widgets here */
break;
case primitives.common.RenderingMode.Update:
/* Update widgets here */
break;
}
var itemConfig = data.context;
if (data.templateName == "info") {
data.element.find("[name=title]").text(itemConfig.title);
}
}
function getInfoTemplate() {
var result = new primitives.orgdiagram.TemplateConfig();
result.name = "info";
result.itemSize = new primitives.common.Size(80, 36);
result.minimizedItemSize = new primitives.common.Size(3, 3);
result.highlightPadding = new primitives.common.Thickness(4, 4, 4, 4);
var itemTemplate = jQuery(
'<div class="bp-item bp-corner-all bt-item-frame">'
+ '<div name="title" class="bp-item" style="top: 3px; left: 6px; width: 68px; height: 28px; font-size: 12px;">'
+ '</div>'
+ '</div>'
).css({
width: result.itemSize.width + "px",
height: result.itemSize.height + "px"
}).addClass("bp-item bp-corner-all bt-item-frame");
result.itemTemplate = itemTemplate.wrap('<div>').parent().html();
return result;
}
</script>
</head>
<body>
<div id="basicdiagram" style="width: 640px; height: 800px; border-style: dotted; border-width: 1px;" />
</body>
</html>
答案 2 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>The very first family chart</title>
<link rel="stylesheet" href="jquery-ui-1.10.2.custom.css" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="primitives.min.js"></script>
<link href="primitives.latest.css" media="screen" rel="stylesheet" type="text/css" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function () {
var options = new primitives.famdiagram.Config();
var items = [
{ id: 4, parents: [1,2], title: "4", description: "Дочка",image: "images/photos/m.png" },
{ id: 3, parents: [1,2], title: "3", description: "Сынок",image: "images/photos/m.png" },
{ id: 2, title: "2", gender: "M", description: "Мари", image: "images/photos/f.png" },
{ id: 1, title: "1", label: "SeR", gender: "M", description: "Серж", image: "images/photos/m.png" }
];
var annotations = [
new primitives.famdiagram.HighlightPathAnnotationConfig({
items: [1, 2,1],
color: primitives.common.Colors.Red,
lineWidth: 2,
opacity: 1,
showArrows: true
})
];
function Update() {
control.update(primitives.orgdiagram.UpdateMode.Refresh);
};
//DemoVerticalLayout.html
options.pageFitMode = primitives.common.PageFitMode.None; //Page Fit Mode
options.orientationType = primitives.common.OrientationType.Bottom; //Orientation Type
options.verticalAlignment = primitives.common.VerticalAlignmentType.Top;
options.horizontalAlignment = primitives.common.HorizontalAlignmentType.Center;
options.childrenPlacementType = primitives.common.ChildrenPlacementType.Horizontal;
options.leavesPlacementType = primitives.common.ChildrenPlacementType.Horizontal;
options.hideGrandParentsConnectors = "false";
options.hasButtons = primitives.common.Enabled.Auto;
options.groupTitleVerticalAlignment = primitives.common.VerticalAlignmentType.Middle;
options.groupTitleHorizontalAlignment = primitives.common.HorizontalAlignmentType.Center;
options.items = items;
//options.annotations = annotations;
options.cursorItem = 5;
options.linesWidth = 1;
options.linesColor = "black";
options.hasSelectorCheckbox = primitives.common.Enabled.False;
options.normalLevelShift = 20;
options.dotLevelShift = 20;
options.lineLevelShift = 20;
options.normalItemsInterval = 20;
options.dotItemsInterval = 10;
options.lineItemsInterval = 10;
options.arrowsDirection = primitives.common.GroupByType.Children;
options.elbowType = primitives.common.ElbowType.Round;
options.showExtraArrows = false;
options.defaultTemplateName = "info";
options.templates = [getInfoTemplate()];
options.onItemRender = onTemplateRender;
jQuery("#basicdiagram").famDiagram(options);
});//]]>
function onTemplateRender(event, data) {
switch (data.renderingMode) {
case primitives.common.RenderingMode.Create:
/* Initialize widgets here */
break;
case primitives.common.RenderingMode.Update:
/* Update widgets here */
break;
}
var itemConfig = data.context;
if (data.templateName == "info") {
data.element.find("[name=label]").text(itemConfig.label);
data.element.find("[name=title]").text(itemConfig.title);
data.element.find("[name=title]").attr("title", itemConfig.title);
data.element.find("[name=description]").text(itemConfig.description);
}
}
function getInfoTemplate() {
var result = new primitives.orgdiagram.TemplateConfig();
result.name = "info";
result.itemSize = new primitives.common.Size(180, 80);
//result.minimizedItemSize = new primitives.common.Size(3, 3);
//result.highlightPadding = new primitives.common.Thickness(4, 4, 4, 4);
var itemTemplate = jQuery(
'<div class="bp-item bp-corner-all bt-item-frame" style="height: 119px; top: 6px; left: 145.5px; position: absolute; padding: 0px; margin: 0px;">'
+ ' <div class="bp-item bp-corner-all bp-title-frame" style="top: 2px; left: 2px; height: 20px;">'
+ ' <div name="title" class="bp-item bp-title" style="top: 3px; left: 6px; height: 18px;">Manager E</div>'
+ ' </div>'
//+ ' <div class="bp-item bp-photo-frame" style="top: 26px; left: 2px; width: 50px; height: 60px;">'
//+ ' <img name="photo" style="height:60px; width:50px;" src="images/photos/m.png">'
//+ ' </div>'
+ ' <div name="phone" class="bp-item" style="top: 26px; left: 56px; height: 18px; font-size: 12px;">1-900-800-70-15</div>'
+ ' <div class="bp-item" style="top: 44px; left: 56px; height: 18px; font-size: 12px;">'
+ ' <a name="email" href="mailto:mail1@mail.com?Subject=Hello%20world" target="_top">mail1@mail.com</a>'
+ ' </div>'
+ ' <div name="description" class="bp-item" style="top: 62px; left: 56px; height: 36px; font-size: 10px;">Managers E description </div>'
+ '</div>'
).css({
//width: result.itemSize.width + "px",
height: result.itemSize.height + "px"
}).addClass("bp-item bp-corner-all bt-item-frame");
result.itemTemplate = itemTemplate.wrap('<div>').parent().html();
return result;
}
</script>
</head>
<body>
<div id="basicdiagram" style="width: 640px; height: 600px; border-style: dotted; border-width: 1px;" />
</body>
</html>
结果：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？