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
Contoh: |
gaya |
Berlaku Untuk: Baris DataTable
String gaya inline yang akan ditetapkan ke node tertentu. Penggantian ini diganti dengan properti
Contoh:
|
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.
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 Jenis Hasil: Array elemen pilihan
|
setSelection(selection) |
Implementasi standar
Jenis Hasil: tidak ada
|
Acara
Name | |
---|---|
ciutkan |
Peristiwa dipicu saat 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 Properti:
Tidak ada
|
Kebijakan Data
Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.