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

ภาพรวม

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

ตัวอย่าง

 
<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 คอลัมน์ โดยแต่ละแถวจะแสดงโหนดในorgorg นี่คือคอลัมน์ 3 คอลัมน์

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

แต่ละโหนดจะมีโหนดหลัก 0 หรือ 1 โหนด และโหนดย่อย 0 โหนดขึ้นไปไม่ได้

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

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

ชื่อพร็อพเพอร์ตี้
รูปแบบที่เลือก

ใช้กับ: แถวตารางข้อมูล

สตริงรูปแบบในบรรทัดที่จะกําหนดให้กับโหนดที่เฉพาะเจาะจงเมื่อเลือก คุณต้องตั้งค่าตัวเลือก allowHtml=true ก่อนจึงจะใช้งานได้ และต้องตั้งค่าตัวเลือกก่อนที่จะเรียกใช้ draw() ในการแสดงภาพ การดําเนินการนี้จะลบล้างตัวเลือก selectionColor สําหรับโหนดที่ระบุ

ตัวอย่าง: myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');

รูปแบบ

ใช้กับ: แถวตารางข้อมูล

สตริงรูปแบบแทรกในบรรทัดที่กําหนดให้กับโหนดที่เฉพาะเจาะจง จะถูกลบล้างโดยพร็อพเพอร์ตี้ selectedStyle คุณต้องตั้งค่าตัวเลือก allowHtml=true จึงจะใช้งานได้ และต้องตั้งค่าตัวเลือกก่อนที่จะเรียกใช้ draw() ในการแสดงภาพ การดําเนินการนี้จะลบล้างตัวเลือก color สําหรับโหนดที่ระบุ

ตัวอย่าง: myDataTable.setRowProperty(3, 'style', 'border: 1px solid green');

ตัวเลือกการกําหนดค่า

ชื่อ
ยุบ

ระบุว่าการดับเบิลคลิกจะยุบโหนดหรือไม่

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

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

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

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

ประเภท: string
ค่าเริ่มต้น: '#edf7ff'
แถวขนาดกะทัดรัด

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

ประเภท: boolean
ค่าเริ่มต้น: false
โหนดคลาส

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

ประเภท: string
ค่าเริ่มต้น: default class name
เลือก NodeClass

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

ประเภท: string
ค่าเริ่มต้น: default class name
การเลือกสี

เลิกใช้งานแล้ว โปรดใช้ 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 และเรียกใช้เมธอดหลังจากที่เหตุการณ์เริ่มทํางานแล้วเท่านั้น

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

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

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