9
Używam GetOrgChart do tworzenia schematu organizacyjnego dla mojej firmy, ale napotkałem mały problem.Dodaj pasek przewijania do svg kontenera
Jeśli rozmiar jest większy niż kontener, chcemy dodać pasek przewijania, aby można było go używać do przewijania, ponieważ będzie to znacznie szybsze niż przeciąganie go za pomocą myszy.
Próbowałem tego example, ale nie mogłem go uruchomić.
Czy jest jakiś sposób osiągnięcia tego, czego szukam?
Poniższy przykład jest znacznie mniejszy niż nasz aktualny wykres, ale powinien być wystarczająco dobry, aby przedstawić problem.
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>