Question

我正在使用GetOrgChart来显示我的companeis组织结构图。

但是在示例中，imgages正在从框架/容器中“开始”以获取用户信息。

<!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>

我试图说明我希望它看起来像：

它的图像应该稍微小一点，所以它不会超出容器。

如何更改图像尺寸。

Answer 1

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

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

在GetorgChart插件中更改图像大小

1 个答案: