संगठन चार्ट

खास जानकारी

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

उदाहरण

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

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

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

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

प्रॉपर्टी का नाम
चुनी गई स्टाइल

इस पर लागू होता है: 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');

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

नाम
अनुमति दें कम करें

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

टाइप: boolean
डिफ़ॉल्ट: false
अनुमति है, एचटीएमएल

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

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

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

टाइप: string
डिफ़ॉल्ट: '#edf7ff'
संक्षिप्त पंक्तियां

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

टाइप: boolean
डिफ़ॉल्ट: false
नोड क्लास

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

टाइप: string
डिफ़ॉल्ट: default class name
चुना गया नोड क्लास

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

टाइप: string
डिफ़ॉल्ट: default class name
चुना गया रंग

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

टाइप: 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 - डेटा टेबल में मौजूद पंक्ति की शून्य पर आधारित इंडेक्स, जो माउस के ऊपर रखे जा रहे नोड से जुड़ी होती है.
ओमाउनआउट

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

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

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

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

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

प्रॉपर्टी:
कभी नहीं

डेटा नीति

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