Diagram Organisasi

Ringkasan

Diagram organisasi adalah diagram hierarki node, biasanya digunakan untuk menggambarkan hubungan superior/subordinat dalam organisasi. Hierarki 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 paket adalah 'orgchart'.

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

Nama class visualisasinya adalah google.visualization.OrgChart.

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

Format Data

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

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

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

Properti Kustom

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

Nama Properti
gaya yang dipilih

Berlaku Untuk: Baris DataTable

String gaya inline yang akan ditetapkan ke node tertentu ketika dipilih. Anda harus menetapkan opsi allowHtml=true agar ini berfungsi dan harus ditetapkan sebelum memanggil draw() pada visualisasi. Tindakan ini akan mengganti 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. Penggantian ini diganti dengan properti selectedStyle. Anda harus menetapkan opsi allowHtml=true agar ini berfungsi, dan harus ditetapkan sebelum memanggil draw() pada visualisasi. Tindakan ini akan mengganti opsi color untuk node yang ditentukan.

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

Opsi Konfigurasi

Name
izinkan Ciutkan

Menentukan apakah klik ganda 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'
CompactRow

Jika disetel ke benar (true), sub-pohon akan ditempatkan sedekat mungkin selama node tidak tumpang-tindih. Gunakan opsi ini untuk mengurangi lebar gambar dan panjang tepi secara keseluruhan.

Jenis: boolean
Default: false
nodeClass

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

Jenis: string
Default: default class name
selectedNodeClass

Nama class yang akan ditetapkan ke elemen node yang dipilih. Terapkan CSS pada 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

'small', 'medium', atau 'large'

Jenis: string
Default: 'medium'

Metode

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

Menggambar diagram.

Jenis Hasil: none
getChildrenIndexes(row)

Menampilkan array dengan indeks turunan dari node yang diberikan.

Jenis Hasil Array.<number>
getCollapsedNodes

Menampilkan array dengan daftar node node yang diciutkan.

Jenis Hasil: Array.<number>
getSelection()

Implementasi getSelection() standar. Elemen pilihan semuanya merupakan elemen baris. Dapat menampilkan lebih dari satu baris yang dipilih.

Jenis Hasil: Array elemen pilihan
setSelection(selection)

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

Jenis Hasil: tidak ada

Acara

Name
ciutkan

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

Properti:
collapsed - Boolean yang menunjukkan apakah peristiwa ini merupakan peristiwa 'collapse' atau 'expand'.
row - Indeks baris berbasis nol di tabel data, yang sesuai dengan node yang diklik.
onmouseover

Dipicu saat pengguna mengarahkan kursor ke baris tertentu.

Properti:
row - Indeks baris berbasis nol dalam tabel data, yang sesuai dengan node yang diarahkan mouse.
onmouseout

Dipicu saat pengguna mengarahkan kursor ke salah satu baris.

Properti:
row - Indeks berbasis nol untuk baris dalam tabel data, sesuai dengan node yang di-mouse.
pilih

Peristiwa pemilihan 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.