更改GetorgChart插件中的图像大小
更改GetorgChart插件中的图像大小
提问于 2017-02-13 16:37:47
我正在使用GetOrgChart来显示我公司的组织结构图。
但如示例中所示，图像是从用户信息的框架/容器“开始”出来的。
<!DOCTYPE html>
<html>
<head>
<title>OrgChart | First Look</title>
<script src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>
<link href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css" rel="stylesheet" />
<style type="text/css">
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#people {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="people"></div>
<script type="text/javascript">
var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
primaryFields: ["name", "title", "phone", "mail"],
photoFields: ["image"],
enableSearch: false,
enableEdit: false,
enableMove: false,
enableZoom: false,
dataSource: [{
id: 1,
parentId: null,
name: "Amber McKenzie",
title: "CEO",
phone: "678-772-470",
mail: "lemmons@jourrapide.com",
adress: "Atlanta, GA 30303",
image: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"
}, {
id: 2,
parentId: 1,
name: "Ava Field",
title: "Paper goods machine setter",
phone: "937-912-4971",
mail: "anderson@jourrapide.com",
image: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"
}, {
id: 3,
parentId: 1,
name: "Evie Johnson",
title: "Employer relations representative",
phone: "314-722-6164",
mail: "thornton@armyspy.com",
image: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"
}, {
id: 4,
parentId: 1,
name: "Paul Shetler",
title: "Teaching assistant",
phone: "330-263-6439",
mail: "shetler@rhyta.com",
image: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"
}, {
id: 5,
parentId: 2,
name: "Rebecca Francis",
title: "Welding machine setter",
phone: "408-460-0589",
image: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"
}, {
id: 6,
parentId: 2,
name: "Rebecca Randall",
title: "Optometrist",
phone: "801-920-9842",
mail: "JasonWGoodman@armyspy.com",
image: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"
}, {
id: 7,
parentId: 2,
name: "Spencer May",
title: "System operator",
phone: "Conservation scientist",
mail: "hodges@teleworm.us",
image: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"
}, {
id: 8,
parentId: 6,
name: "Max Ford",
title: "Budget manager",
phone: "989-474-8325",
mail: "hunter@teleworm.us",
image: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"
}, {
id: 9,
parentId: 7,
name: "Riley Bray",
title: "Structural metal fabricator",
phone: "479-359-2159",
image: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"
}, {
id: 10,
parentId: 7,
name: "Callum Whitehouse",
title: "Radar controller",
phone: "847-474-8775",
image: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"
}]
});
</script>
</body>
</html>
我试着说明我希望它是什么样子：
它的图像应该稍微小一点，这样它就不会离开容器。
如何更改图像大小。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-16 04:11:44
getOrgChart.themes.ula.image = '<image xlink:href="[href]" x="20" y="0" height="170" preserveAspectRatio="xMidYMid slice" width="170"/>';您可以使用图像主题属性的x/y宽度/高度属性来控制图像的大小和位置。在getorgchart初始化之前，将上述代码添加到您的代码中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42199737
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号