gpt4 book ai didi

jquery - 在 GetorgChart 插件中更改图像大小

转载 作者:行者123 更新时间:2023-12-01 05:22:19 27 4
gpt4 key购买 nike

我正在使用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>

我试图说明我希望它是什么样子:

它的图像应该小一点,这样它就不会超出容器。

如何更改图像大小。

最佳答案

getOrgChart.themes.ula.image = '<image xlink:href="[href]"  x="20" y="0" height="170" preserveAspectRatio="xMidYMid slice" width="170"/>';

您可以使用图像主题属性的 x/y 宽度/高度属性来控制图像的大小和位置。在 getorgchart 初始化之前将上面的代码添加到您的代码中

关于jquery - 在 GetorgChart 插件中更改图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42199737/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com