সংস্থার চার্ট

• ওভারভিউ
• উদাহরণ
• লোড হচ্ছে
• উপাত্ত বিন্যাস
  • কাস্টম বৈশিষ্ট্য
• কনফিগারেশন অপশন
• পদ্ধতি
• ঘটনা
• ডেটা নীতি

ওভারভিউ

অর্গ চার্ট হল নোডের অনুক্রমের ডায়াগ্রাম, সাধারণত একটি প্রতিষ্ঠানে উচ্চতর/অধীনস্থ সম্পর্ক চিত্রিত করতে ব্যবহৃত হয়। একটি পারিবারিক গাছ হল এক ধরনের অর্গ চার্ট।

উদাহরণ

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> 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}); } <span class="notranslate"><input type='submit' value="JSFiddle এ এটি নিজেই কোড করুন" class='button'/><input type='hidden' name='title' value='Org Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> 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}); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Org Chart.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span> <span class="notranslate"><input type='submit' value="JSFiddle এ এটি নিজেই কোড করুন" class='button'/><input type='hidden' name='title' value='Org Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> 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}); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Org Chart.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> 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}); }

<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 এর 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
অনুমতি এইচটিএমএল	যদি সত্যে সেট করা হয়, যে নামগুলিতে HTML ট্যাগ রয়েছে সেগুলিকে HTML হিসাবে রেন্ডার করা হবে। প্রকার: boolean ডিফল্ট: false
রঙ	অবচয়। পরিবর্তে nodeClass ব্যবহার করুন। অর্গানচার্ট উপাদানগুলির পটভূমির রঙ। প্রকার: string ডিফল্ট: '#edf7ff'
কম্প্যাক্ট সারি	সত্যে সেট করা হলে, সাবট্রিগুলি যতক্ষণ সম্ভব কাছাকাছি রাখা হয় যতক্ষণ না নোডগুলি ওভারল্যাপ না হয়। অঙ্কনের সামগ্রিক প্রস্থ এবং প্রান্তের দৈর্ঘ্য কমাতে এই বিকল্পটি ব্যবহার করুন। প্রকার: boolean ডিফল্ট: false
নোডক্লাস	নোড উপাদানে বরাদ্দ করার জন্য একটি শ্রেণীর নাম। চার্ট উপাদানগুলির জন্য রঙ বা শৈলী নির্দিষ্ট করতে এই শ্রেণীর নামের সাথে CSS প্রয়োগ করুন। প্রকার: string ডিফল্ট: default class name
নির্বাচিত নোডক্লাস	নির্বাচিত নোড উপাদানগুলিতে বরাদ্দ করার জন্য একটি শ্রেণীর নাম৷ নির্বাচিত চার্ট উপাদানগুলির জন্য রঙ বা শৈলী নির্দিষ্ট করতে এই শ্রেণীর নামের সাথে CSS প্রয়োগ করুন। প্রকার: 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 - ডেটা টেবিলের সারির শূন্য-ভিত্তিক সূচক, ক্লিক করা নোডের সাথে সম্পর্কিত।
মাউসওভার	ব্যবহারকারী যখন একটি নির্দিষ্ট সারির উপর ঘোরায় তখন ট্রিগার হয়। বৈশিষ্ট্য: row - ডেটা টেবিলের সারির শূন্য-ভিত্তিক সূচী, নোডের মাউস ওভারের সাথে সম্পর্কিত।
onmouseout	যখন ব্যবহারকারী একটি সারির বাইরে হোভার করে তখন ট্রিগার হয়। বৈশিষ্ট্য: row - ডেটা টেবিলের সারির শূন্য-ভিত্তিক সূচক, যে নোড থেকে মাউস আউট করা হচ্ছে তার সাথে সম্পর্কিত।
নির্বাচন করুন	স্ট্যান্ডার্ড নির্বাচন ইভেন্ট বৈশিষ্ট্য: কোনোটিই নয়
প্রস্তুত	চার্টটি বাহ্যিক পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে draw পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে এবং ইভেন্টটি চালু হওয়ার পরেই পদ্ধতিগুলিকে কল করতে হবে। বৈশিষ্ট্য: কোনোটিই নয়

ডেটা নীতি

সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না।