9
GetOrgChartを使用して私の会社の組織図を作成していますが、少し問題がありました。スクロールバーをsvgコンテナに追加する
SVGがコンテナより大きい場合は、スクロールバーを追加してマウスでドラッグするよりもはるかに高速であるため、スクロールバーを使用してスクロールすることができます。
私はこれを試しましたが、exampleは動作させることができませんでした。
私が探しているものを達成する方法はありますか？
以下の例は実際のグラフよりも小さくなりますが、問題を表すのに十分なはずです。
var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
primaryFields: ["name", "title", "phone", "mail"],
photoFields: ["image"],
scale: 0.4,
dataSource: [{
id: 1,
parentId: null,
name: "Amber McKenzie",
title: "CEO",
phone: "678-772-470",
mail: "[email protected]",
adress: "Atlanta, GA 30303",
image: "images/f-11.jpg"
},
{
id: 2,
parentId: 1,
name: "Ava Field",
title: "Paper goods machine setter",
phone: "937-912-4971",
mail: "[email protected]",
image: "images/f-10.jpg"
},
{
id: 3,
parentId: 1,
name: "Evie Johnson",
title: "Employer relations representative",
phone: "314-722-6164",
mail: "[email protected]",
image: "images/f-9.jpg"
},
{
id: 4,
parentId: 1,
name: "Paul Shetler",
title: "Teaching assistant",
phone: "330-263-6439",
mail: "[email protected]",
image: "images/f-5.jpg"
},
{
id: 11,
parentId: 1,
name: "Paul Shetler",
title: "Teaching assistant",
phone: "330-263-6439",
mail: "[email protected]",
image: "images/f-5.jpg"
},
{
id: 12,
parentId: 1,
name: "Paul Shetler",
title: "Teaching assistant",
phone: "330-263-6439",
mail: "[email protected]",
image: "images/f-5.jpg"
},
{
id: 5,
parentId: 2,
name: "Rebecca Francis",
title: "Welding machine setter",
phone: "408-460-0589",
image: "images/f-4.jpg"
},
{
id: 6,
parentId: 2,
name: "Rebecca Randall",
title: "Optometrist",
phone: "801-920-9842",
mail: "[email protected]",
image: "images/f-8.jpg"
},
{
id: 7,
parentId: 2,
name: "Spencer May",
title: "System operator",
phone: "Conservation scientist",
mail: "[email protected]",
image: "images/f-7.jpg"
},
{
id: 8,
parentId: 6,
name: "Max Ford",
title: "Budget manager",
phone: "989-474-8325",
mail: "[email protected]",
image: "images/f-6.jpg"
},
{
id: 9,
parentId: 7,
name: "Riley Bray",
title: "Structural metal fabricator",
phone: "479-359-2159",
image: "images/f-3.jpg"
},
{
id: 10,
parentId: 7,
name: "Callum Whitehouse",
title: "Radar controller",
phone: "847-474-8775",
image: "images/f-2.jpg"
}
]
});
$('.get-left,.get-down,.get-up,.get-right').remove();
$(document).ready(function() {
$(".get-oc-c").css("overflow","scroll");
})#people {
width: 90%;
height: 90%;
border:1px solid #000;
}<link href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>
<div id="people"></div>