Diagram Organisasi

Ringkasan

Diagram organisasi adalah diagram hierarki node, yang biasanya digunakan untuk menggambarkan hubungan atas/bawah organisasi dalam suatu organisasi. Silsilah keluarga adalah jenis diagram organisasi.

Contoh

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

Memuat

Nama paketnya adalah 'orgchart'.

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

Nama class visualisasi adalah google.visualization.OrgChart.

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

Format Data

Tabel dengan tiga kolom string, dengan setiap baris merepresentasikan node dalam orgchart. Berikut adalah tiga kolom tersebut:

  • Kolom 0 - ID node. Nilainya harus unik di antara semua node, dan dapat berisi karakter apa pun, termasuk spasi. Ini ditampilkan pada node. Anda dapat menentukan nilai berformat untuk ditampilkan pada diagram, tetapi nilai yang tidak terformat masih digunakan sebagai ID.
  • Kolom 1 - [opsional] ID node induk. Nilai ini harus berupa nilai yang tidak terformat dari kolom 0 baris lain. Biarkan tidak ditentukan untuk node root.
  • Kolom 2 - [opsional] Teks ujung alat yang akan ditampilkan, saat pengguna mengarahkan kursor ke node ini.

Setiap node dapat memiliki nol atau satu node induk, serta nol atau beberapa node turunan.

Properti Kustom

Anda dapat menetapkan properti kustom berikut ke elemen tabel data, menggunakan metode setProperty() dari DataTable:

Nama Properti
selectedStyle

Berlaku Untuk: Baris DataTable

String gaya inline yang akan ditetapkan ke node tertentu saat dipilih. Anda harus menetapkan opsi allowHtml=true agar fungsi ini berfungsi, dan opsi ini harus ditetapkan sebelum memanggil draw() pada visualisasi. Tindakan ini akan menggantikan opsi selectionColor untuk node yang ditentukan.

Contoh:   myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');

gaya

Berlaku Untuk: Baris DataTable

String gaya inline yang akan ditetapkan ke node tertentu. Hal ini diganti oleh properti selectedStyle. Anda harus menetapkan opsi allowHtml=true agar fungsi ini berfungsi, dan opsi ini harus ditetapkan sebelum memanggil draw() pada visualisasi. Tindakan ini akan menggantikan opsi color untuk node yang ditentukan.

Contoh:   myDataTable.setRowProperty(3, 'style', 'border: 1px solid green');

Opsi Konfigurasi

Name
allowCollapse

Menentukan apakah klik dua kali akan menciutkan node.

Jenis: boolean
Default: false
allowHtml

Jika disetel ke benar (true), nama yang menyertakan tag HTML akan dirender sebagai HTML.

Jenis: boolean
Default: false
warna

Tidak digunakan lagi. Sebagai gantinya, gunakan nodeClass. Warna latar belakang elemen orgchart.

Jenis: string
Default: '#edf7ff'
compactRows

Jika ditetapkan ke true, subpohon ditempatkan sedekat mungkin selama node tidak tumpang tindih. Gunakan opsi ini untuk mengurangi lebar dan panjang tepi gambar secara keseluruhan.

Jenis: boolean
Default: false
nodeClass

Nama class yang akan ditetapkan ke elemen node. Terapkan CSS ke nama class ini untuk menentukan warna atau gaya elemen diagram.

Jenis: string
Default: default class name
selectedNodeClass

Nama class yang akan ditetapkan ke elemen node yang dipilih. Terapkan CSS ke nama class ini untuk menentukan warna atau gaya pada elemen diagram yang dipilih.

Jenis: string
Default: default class name
selectionColor

Tidak digunakan lagi. Sebagai gantinya, gunakan selectedNodeClass. Warna latar belakang elemen orgchart yang dipilih.

Jenis: string
Default: '#d6e9f8'
ukuran

'kecil', 'sedang', atau 'besar'

Jenis: string
Default: 'medium'

Metode

Metode
collapse(row, collapsed)
Menciutkan atau memperluas node.
  • row - Indeks baris yang akan diluaskan atau diciutkan.
  • collapsed Menentukan apakah akan menciutkan atau meluaskan baris, jika true (benar) berarti menciutkan.
Jenis Pengembalian: none
draw(data, options)

Menggambar diagram.

Jenis Pengembalian: none
getChildrenIndexes(row)

Menampilkan array dengan indeks turunan dari node yang diberikan.

Jenis Pengembalian Array.<number>
getCollapsedNodes

Menampilkan array dengan daftar indeks node yang diciutkan.

Jenis Pengembalian: Array.<number>
getSelection()

Implementasi getSelection() standar. Elemen pemilihan adalah semua elemen baris. Dapat menampilkan lebih dari satu baris yang dipilih.

Jenis Pengembalian: Array elemen pilihan
setSelection(selection)

Implementasi setSelection() standar. Memperlakukan setiap entri pilihan sebagai pilihan baris. Mendukung pemilihan beberapa baris.

Jenis Pengembalian: tidak ada

Acara

Name
ciutkan

Peristiwa yang dipicu saat allowCollapse ditetapkan ke true dan pengguna mengklik dua kali pada node yang memiliki turunan.

Properti:
collapsed - Boolean yang menunjukkan apakah ini peristiwa 'ciutkan' atau 'perluas'.
row - Indeks berbasis nol untuk baris dalam tabel data, yang sesuai dengan node yang diklik.
onmouseover

Dipicu saat pengguna mengarahkan kursor ke baris tertentu.

Properti:
row - Indeks berbasis nol untuk baris dalam tabel data, yang terkait dengan node yang ditunjuk oleh mouse.
onmouseout

Dipicu saat pengguna mengarahkan kursor keluar dari baris.

Properti:
row - Indeks berbasis nol untuk baris dalam tabel data, yang terkait dengan node yang ditunjuk dari mouse.
pilih

Peristiwa pilihan standar

Properti:
Tidak ada
siap

Diagram siap untuk panggilan metode eksternal. Jika ingin berinteraksi dengan diagram, dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode draw, dan memanggil metode hanya setelah peristiwa diaktifkan.

Properti:
Tidak ada

Kebijakan Data

Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.