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>