แผนภูมิองค์กร

ภาพรวม

แผนภูมิองค์กรเป็นแผนภาพลำดับชั้นของโหนด ซึ่งโดยทั่วไปจะใช้เพื่อแสดงความสัมพันธ์ที่เหนือกว่า/ระดับรองในองค์กร แผนผังครอบครัวเป็นแผนภูมิองค์กรประเภทหนึ่ง

ตัวอย่าง

 
<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);

รูปแบบข้อมูล

ตารางที่มีคอลัมน์สตริง 3 คอลัมน์ โดยแต่ละแถวแสดงโหนดใน orgchart ต่อไปนี้คือคอลัมน์ 3 คอลัมน์

  • คอลัมน์ 0 - รหัสโหนด โหนดไม่ควรซ้ำกันกับทุกโหนดและมีอักขระใดก็ได้ รวมถึงเว้นวรรค ข้อมูลนี้จะแสดงอยู่ในโหนด คุณระบุค่าที่จัดรูปแบบเพื่อแสดงในแผนภูมิแทนได้ แต่ระบบจะยังใช้ค่าที่ไม่ได้จัดรูปแบบเป็นรหัส
  • คอลัมน์ 1 - [ไม่บังคับ] รหัสของโหนดหลัก ค่านี้ควรเป็นค่าที่ไม่ได้จัดรูปแบบจากคอลัมน์ 0 ของแถวอื่น ไม่ต้องระบุโหนดราก
  • คอลัมน์ 2 - [ไม่บังคับ] ข้อความเคล็ดลับเครื่องมือที่จะแสดงเมื่อผู้ใช้วางเมาส์เหนือโหนดนี้

แต่ละโหนดอาจมีโหนดหลัก 0 หรือ 1 โหนด และมีโหนดย่อยอย่างน้อย 0 โหนด

พร็อพเพอร์ตี้ที่กำหนดเอง

คุณกำหนดพร็อพเพอร์ตี้ที่กำหนดเองต่อไปนี้ให้กับองค์ประกอบตารางข้อมูลได้โดยใช้เมธอด setProperty() ของ DataTable

ชื่อพร็อพเพอร์ตี้
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

หากตั้งค่าเป็น "จริง" ชื่อที่มีแท็ก HTML จะแสดงผลเป็น HTML

ประเภท: boolean
ค่าเริ่มต้น: false
สี

เลิกใช้งานแล้ว โปรดใช้ NodeClass แทน สีพื้นหลังขององค์ประกอบแผนภูมิองค์กร

ประเภท: string
ค่าเริ่มต้น: '#edf7ff'
compactRows

หากตั้งค่าเป็น "จริง" ระบบจะวางแผนผังย่อยให้อยู่ใกล้กันมากที่สุดตราบใดที่โหนดไม่ทับซ้อนกัน ใช้ตัวเลือกนี้เพื่อลดความกว้างและความยาวของขอบภาพวาดโดยรวม

ประเภท: boolean
ค่าเริ่มต้น: false
nodeClass

ชื่อคลาสที่จะกำหนดให้กับองค์ประกอบโหนด ใช้ CSS กับชื่อคลาสนี้เพื่อระบุสีหรือลักษณะขององค์ประกอบแผนภูมิ

ประเภท: string
ค่าเริ่มต้น: default class name
selectedNodeClass

ชื่อคลาสที่จะกำหนดให้กับองค์ประกอบโหนดที่เลือก ใช้ CSS กับชื่อคลาสนี้เพื่อระบุสีหรือลักษณะขององค์ประกอบแผนภูมิที่เลือก

ประเภท: 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() มาตรฐาน องค์ประกอบการเลือกเป็นองค์ประกอบแถวทั้งหมด แสดงผลแถวที่เลือกได้มากกว่า 1 แถว

ประเภทผลลัพธ์: อาร์เรย์ขององค์ประกอบการเลือก
setSelection(selection)

การใช้งาน setSelection() แบบมาตรฐาน จะถือว่าทุกรายการที่เลือกเป็นแถวที่เลือก รองรับการเลือกหลายแถว

ประเภทการคืนสินค้า: ไม่มี

กิจกรรม

ชื่อ
ยุบ

เหตุการณ์จะทริกเกอร์เมื่อตั้งค่า allowCollapse เป็น true และผู้ใช้ดับเบิลคลิกบนโหนดที่มีรายการย่อย

พร็อพเพอร์ตี้:
collapsed - บูลีนที่ระบุว่านี่เป็นเหตุการณ์ "ยุบ" หรือ "ขยาย"
row - ดัชนีฐาน 0 ของแถวในตารางข้อมูล ซึ่งสอดคล้องกับโหนดที่มีการคลิก
onmouseover

ทริกเกอร์เมื่อผู้ใช้วางเมาส์เหนือแถวที่ต้องการ

พร็อพเพอร์ตี้:
row - ดัชนีฐาน 0 ของแถวในตารางข้อมูล ซึ่งสอดคล้องกับโหนดที่เมาส์อยู่เหนือ
onmouseout

ทริกเกอร์เมื่อผู้ใช้วางเมาส์เหนือแถว

พร็อพเพอร์ตี้:
row - ดัชนีฐาน 0 ของแถวในตารางข้อมูล ซึ่งสอดคล้องกับโหนดที่เมาส์เอาออก
เลือก

เหตุการณ์การเลือกมาตรฐาน

พร็อพเพอร์ตี้:
ไม่มี
พร้อม

แผนภูมิพร้อมสำหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด draw และเรียกใช้เมธอดหลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น

พร็อพเพอร์ตี้:
ไม่มี

นโยบายข้อมูล

โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ โดยจะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ