संगठन चार्ट

खास जानकारी

संगठन के चार्ट, नोड की हैरारकी के डायग्राम को दिखाते हैं. आम तौर पर, इनका इस्तेमाल किसी संगठन में बेहतर/सबसे नीचे के संबंधों को दिखाने के लिए किया जाता है. फ़ैमिली ट्री, संगठन के चार्ट का एक टाइप होता है.

उदाहरण

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

लोड हो रहा है

पैकेज का नाम 'orgchart' है.

  google.charts.load('current', {packages: ['orgchart']});

विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.OrgChart है.

  var visualization = new google.visualization.OrgChart(container);

डेटा फ़ॉर्मैट

तीन स्ट्रिंग कॉलम वाली टेबल, जिसमें हर पंक्ति संगठन चार्ट में एक नोड दिखाती है. यहां तीन कॉलम दिए गए हैं:

  • कॉलम 0 - नोड आईडी. यह सभी नोड के बीच अलग होना चाहिए और इसमें स्पेस समेत कोई भी वर्ण शामिल हो सकता है. इसे नोड पर दिखाया जाता है. इसके बजाय, चार्ट पर फ़ॉर्मैट की गई वैल्यू दिखाई जा सकती है, लेकिन फ़ॉर्मैट नहीं की गई वैल्यू का इस्तेमाल अब भी आईडी के तौर पर किया जाता है.
  • कॉलम 1 - [ज़रूरी नहीं] पैरंट नोड का आईडी. यह दूसरी पंक्ति के कॉलम 0 में मौजूद फ़ॉर्मैट नहीं की गई वैल्यू होनी चाहिए. रूट नोड के लिए तय नहीं है.
  • जब कोई उपयोगकर्ता इस नोड पर कर्सर घुमाता है, तो कॉलम 2 - [ज़रूरी नहीं] टूल-टिप टेक्स्ट दिखाना.

हर नोड में शून्य या एक पैरंट नोड हो सकता है. साथ ही, शून्य या उससे ज़्यादा चाइल्ड नोड हो सकते हैं.

कस्टम प्रॉपर्टी

DataTable में से setProperty() तरीके का इस्तेमाल करके, डेटा टेबल के एलिमेंट में इन कस्टम प्रॉपर्टी को असाइन किया जा सकता है:

प्रॉपर्टी का नाम
selectedStyle

इस पर लागू होता है: DataTable पंक्ति

चुने जाने पर किसी खास नोड को असाइन करने के लिए इनलाइन स्टाइल स्ट्रिंग. यह काम करे, इसके लिए आपको allowHtml=true विकल्प सेट करना होगा. साथ ही, विज़ुअलाइज़ेशन पर draw() को कॉल करने से पहले, इसे सेट करना होगा. यह बताए गए नोड के लिए selectionColor विकल्प को बदल देता है.

उदाहरण:   myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');

स्टाइल

इस पर लागू होता है: DataTable पंक्ति

किसी खास नोड को असाइन करने के लिए इनलाइन स्टाइल स्ट्रिंग. इसे selectedStyle प्रॉपर्टी से बदला गया है. यह काम करे, इसके लिए आपको allowHtml=true विकल्प सेट करना होगा. साथ ही, इसे विज़ुअलाइज़ेशन पर draw() को कॉल करने से पहले सेट करना होगा. यह बताए गए नोड के लिए color विकल्प को बदल देता है.

उदाहरण:   myDataTable.setRowProperty(3, 'style', 'border: 1px solid green');

कॉन्फ़िगरेशन के विकल्प

नाम
allowCollapse

यह तय करता है कि दो बार क्लिक करने से नोड छोटा होगा या नहीं.

टाइप: boolean
डिफ़ॉल्ट: false
allowHtml

अगर इसे 'सही है' पर सेट किया जाता है, तो एचटीएमएल टैग वाले नाम एचटीएमएल के तौर पर रेंडर किए जाएंगे.

टाइप: boolean
डिफ़ॉल्ट: false
रंग

अब काम नहीं करता. इसके बजाय, nodeClass का इस्तेमाल करें. संगठन चार्ट के एलिमेंट के बैकग्राउंड का रंग.

टाइप: string
डिफ़ॉल्ट: '#edf7ff'
compactRows

अगर 'सही है' पर सेट किया जाता है, तो सबट्री को तब तक करीब रखा जाता है, जब तक नोड ओवरलैप न हों. ड्रॉइंग की पूरी चौड़ाई और किनारों की लंबाई कम करने के लिए, इस विकल्प का इस्तेमाल करें.

टाइप: boolean
डिफ़ॉल्ट: false
nodeClass

नोड एलिमेंट को असाइन करने के लिए क्लास का नाम. चार्ट के एलिमेंट के रंग या स्टाइल तय करने के लिए, इस क्लास के नाम में सीएसएस का इस्तेमाल करें.

टाइप: string
डिफ़ॉल्ट: default class name
selectedNodeClass

चुने गए नोड एलिमेंट को असाइन करने के लिए क्लास का नाम. चुने गए चार्ट एलिमेंट के रंग या स्टाइल तय करने के लिए, इस क्लास के नाम में सीएसएस लागू करें.

टाइप: string
डिफ़ॉल्ट: default class name
selectionColor

अब काम नहीं करता. इसके बजाय, selectedNodeClass का इस्तेमाल करें. चुने गए संगठन एलिमेंट के बैकग्राउंड का रंग.

टाइप: string
डिफ़ॉल्ट: '#d6e9f8'
साइज़

'छोटा', 'मीडियम' या 'बड़ा'

टाइप: string
डिफ़ॉल्ट: 'medium'

तरीके

तरीका
collapse(row, collapsed)
नोड को छोटा या बड़ा करता है.
  • row - विस्तार या छोटा करने के लिए पंक्ति का इंडेक्स.
  • collapsed पंक्ति को छोटा या बड़ा करें, जहां सही का मतलब है छोटा करें.
सामान लौटाने का तरीका: none
draw(data, options)

चार्ट बनाता है.

सामान लौटाने का तरीका: none
getChildrenIndexes(row)

दिए गए नोड के चिल्ड्रेन के इंडेक्स वाली अरे दिखाता है.

सामान लौटाने का तरीका Array.<number>
getCollapsedNodes

छोटे किए गए नोड के इंडेक्स की सूची के साथ श्रेणी दिखाता है.

सामान लौटाने का तरीका: Array.<number>
getSelection()

स्टैंडर्ड getSelection() लागू करना. चुनने के लिए मौजूद सभी एलिमेंट, पंक्ति के सभी एलिमेंट हैं. चुनी गई एक से ज़्यादा पंक्तियां दिख सकती हैं.

रिटर्न टाइप: चुने गए एलिमेंट की कलेक्शन
setSelection(selection)

स्टैंडर्ड setSelection() लागू करना. चुनी गई हर एंट्री को, चुनी गई पंक्ति मानता है. एक से ज़्यादा पंक्तियां चुनी जा सकती हैं.

सामान लौटाने का तरीका: कोई नहीं

इवेंट

नाम
छोटा करें

इवेंट तब ट्रिगर होता है, जब allowCollapse को true पर सेट किया जाता है और उपयोगकर्ता चाइल्ड वाले नोड पर दो बार क्लिक करता है.

प्रॉपर्टी:
collapsed - बूलियन से पता चलता है कि यह 'छोटा करें' या 'बड़ा करें' इवेंट है.
row - डेटा टेबल में लाइन का शून्य-आधारित इंडेक्स, जो क्लिक किए जा रहे नोड से जुड़ा होता है.
onmouseover

तब ट्रिगर होता है, जब उपयोगकर्ता किसी खास लाइन पर कर्सर घुमाता है.

प्रॉपर्टी:
row - डेटा टेबल में पंक्ति का शून्य-आधारित इंडेक्स, जिसके ऊपर माउस ले जाया जा रहा है.
onmouseout

तब ट्रिगर होता है, जब उपयोगकर्ता किसी पंक्ति से बाहर कर्सर घुमाता है.

प्रॉपर्टी:
row - डेटा टेबल में पंक्ति का शून्य-आधारित इंडेक्स, जिससे माउस से बाहर निकाले जा रहे नोड को चुना जाता है.
चुनें

स्टैंडर्ड सिलेक्ट इवेंट

प्रॉपर्टी:
कोई नहीं
तैयार

यह चार्ट, बाहरी तरीके से कॉल करने के लिए तैयार है. अगर आपको चार्ट के साथ इंटरैक्ट करने और कॉल के तरीकों को ड्रॉ करने के बाद, उन्हें ड्रॉ करने के लिए सेट करना है, तो draw तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना होगा. साथ ही, इवेंट के चालू होने के बाद ही तरीकों को कॉल करना होगा.

प्रॉपर्टी:
कोई नहीं

डेटा नीति

सभी कोड और डेटा को ब्राउज़र में प्रोसेस और रेंडर किया जाता है. किसी भी सर्वर पर कोई भी डेटा नहीं भेजा जाता.