Panoramica
Gli organi sono diagrammi di una gerarchia di nodi, comunemente utilizzati per rappresentare relazioni superiori/subordinate in un'organizzazione. Un albero genealogico è un tipo di grafico dell'organizzazione.
Esempio
<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>
Caricamento
Il nome del pacchetto è 'orgchart'
.
google.charts.load('current', {packages: ['orgchart']});
Il nome della classe della visualizzazione è google.visualization.OrgChart
.
var visualization = new google.visualization.OrgChart(container);
Formato dei dati
Una tabella con tre colonne di stringhe, in cui ogni riga rappresenta un nodo nell'organigramma. Di seguito sono riportate le tre colonne:
- Colonna 0: l'ID nodo. Deve essere univoco tra tutti i nodi e può includere qualsiasi carattere, spazi inclusi. Questo viene visualizzato sul nodo. Puoi specificare un valore formattato da visualizzare sul grafico, ma il valore non formattato viene comunque utilizzato come ID.
- Colonna 1 - [Facoltativo] L'ID del nodo padre. Deve essere il valore non formattato nella colonna 0 di un'altra riga. Non specificare un nodo radice.
- Colonna 2 - [facoltativo] Testo della descrizione comando da mostrare quando un utente passa il mouse sopra questo nodo.
Ogni nodo può avere zero o un nodo padre e zero o più nodi secondari.
Proprietà personalizzate
Puoi assegnare le seguenti proprietà personalizzate agli elementi della tabella di dati utilizzando il metodo setProperty()
di DataTable
:
Nome proprietà | |
---|---|
Stile selezionato |
Si applica a: riga DataTable
Una stringa di stile incorporata da assegnare a un nodo specifico quando selezionata. Devi impostare
l'opzione
Esempio: |
style |
Si applica a: riga DataTable
Una stringa di stile incorporata da assegnare a un nodo specifico. Questa proprietà è sostituita
dalla proprietà
Esempio:
|
Opzioni di configurazione
Nome | |
---|---|
allowComprimi |
Determina se il doppio clic comprime un nodo. Tipo:
boolean Predefinito:
false |
consentiHTML |
Se è impostata su true, i nomi che includono i tag HTML verranno visualizzati come HTML. Tipo:
boolean Predefinito:
false |
colore |
Deprecato. Usa nodeClass. Il colore dello sfondo degli elementi dell'organigramma. Tipo:
string Predefinito:
'#edf7ff' |
riga compatta |
Se impostato su true, i sottoalbero vengono posizionati il più vicino possibile, purché i nodi non si sovrappongano. Utilizza questa opzione per ridurre la larghezza complessiva del disegno e la lunghezza del bordo. Tipo:
boolean Predefinito:
false |
classeClasse |
Un nome di classe da assegnare agli elementi nodo. Applica il CSS a questo nome classe per specificare colori o stili per gli elementi del grafico. Tipo:
string Predefinito:
default class name |
Classe classe selezionata |
Un nome di classe da assegnare agli elementi nodo selezionati. Applica il CSS a questo nome classe per specificare colori o stili per gli elementi del grafico selezionati. Tipo:
string Predefinito:
default class name |
selezioneColore |
Deprecato. Usa invece la funzionalità nodeNodeClass selezionata. Il colore di sfondo degli elementi dell'organigramma selezionati. Tipo:
string Predefinito:
'#d6e9f8' |
dimensioni |
"small", "medium" o "large" Tipo:
string Predefinito:
'medium' |
Metodi
Metodo | |
---|---|
collapse(row, collapsed) |
Consente di comprimere o espandere il nodo.
Tipo di reso:
none |
draw(data, options) |
Disegna il grafico. Tipo di reso:
none |
getChildrenIndexes(row) |
Restituisce una matrice con gli indici degli elementi secondari del nodo specificato. Tipo di reso
Array.<number> |
getCollapsedNodes |
Restituisce una matrice con l'elenco degli indici del nodo compresso. Tipo di reso:
Array.<number> |
getSelection() |
Implementazione Tipo di reso: array di elementi di selezione
|
setSelection(selection) |
Implementazione standard di
Tipo di reso: nessuno
|
Eventi
Nome | |
---|---|
comprimi |
Evento attivato quando Proprietà:
collapsed : un valore booleano che indica se si tratta di un evento "comprimi" o "espandi".
row : l'indice basato su zero della riga nella tabella dei dati, corrispondente al nodo su cui viene fatto clic.
|
onmouseover |
Si attiva quando l'utente passa il mouse sopra una riga specifica. Proprietà:
row : l'indice in base zero della riga nella tabella dati, corrispondente al nodo su cui viene eseguito il mouse.
|
onmouseout |
Si attiva quando l'utente passa il mouse sopra una riga. Proprietà:
row : l'indice in base zero della riga nella tabella dati, corrispondente al nodo da cui viene eseguito il mouse.
|
seleziona |
Evento di selezione standard Proprietà:
Nessuno
|
pronta |
Il grafico è pronto per le chiamate ai metodi esterni. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo disegnato, devi configurare un listener per questo evento prima di chiamare il metodo Proprietà:
Nessuno
|
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato ad alcun server.