Organigramma

Panoramica

Gli organigramma sono diagrammi di una gerarchia di nodi, comunemente utilizzati per rappresentare le relazioni superiori/subordinate in un'organizzazione. Un albero genealogico è un tipo di organigramma.

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 in corso...

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 stringa, in cui ogni riga rappresenta un nodo nell'organigramma. Di seguito sono riportate le tre colonne:

  • Colonna 0: l'ID del nodo. Deve essere univoco tra tutti i nodi e può includere qualsiasi carattere, inclusi gli spazi. Questo viene mostrato sul nodo. Puoi specificare un valore formattato da mostrare nel grafico, ma il valore non formattato viene comunque utilizzato come ID.
  • Colonna 1: [facoltativo] l'ID del nodo padre. Deve essere il valore senza formattazione della colonna 0 di un'altra riga. Lascia non specificato per un nodo principale.
  • 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 figlio.

Proprietà personalizzate

Puoi assegnare le seguenti proprietà personalizzate agli elementi della tabella di dati, utilizzando il metodo setProperty() di DataTable:

Nome proprietà
selectedStyle

Si applica a:riga Tabella di dati

Una stringa di stile in linea da assegnare a un nodo specifico quando viene selezionato. Affinché funzioni, devi impostare l'opzione allowHtml=true e deve essere impostata prima di chiamare draw() sulla visualizzazione. Questa sostituisce l'opzione selectionColor per il nodo specificato.

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

stile

Si applica a:riga Tabella di dati

Una stringa di stile in linea da assegnare a un nodo specifico. Viene eseguito l'override dalla proprietà selectedStyle. Affinché funzioni, devi impostare l'opzione allowHtml=true e deve essere impostata prima di chiamare draw() sulla visualizzazione. Questa operazione sostituisce l'opzione color per il nodo specificato.

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

Opzioni di configurazione

Nome
allowCollapse

Determina se il doppio clic comprime un nodo.

Tipo: boolean
Predefinita: false
allowHtml

Se è impostato su true, i nomi che includono tag HTML verranno visualizzati come HTML.

Tipo: boolean
Predefinita: false
color

Obsoleta. Usa invece nodeClass. Il colore di sfondo degli elementi dell'organigramma.

Tipo: string
Predefinita: '#edf7ff'
compactRows

Se impostato su true, i sottoalberi vengono posizionati il più vicino possibile a condizione che i nodi non si sovrappongano. Utilizza questa opzione per ridurre la larghezza complessiva del disegno e la lunghezza dei bordi.

Tipo: boolean
Predefinita: false
nodeClass

Un nome di classe da assegnare agli elementi dei nodi. Applica CSS al nome di questa classe per specificare colori o stili per gli elementi del grafico.

Tipo: string
Predefinita: default class name
selectedNodeClass

Un nome di classe da assegnare agli elementi dei nodi selezionati. Applica CSS al nome di questa classe per specificare colori o stili per gli elementi del grafico selezionati.

Tipo: string
Predefinita: default class name
selectionColor

Obsoleta. Usa invece selectedNodeClass. Il colore di sfondo degli elementi selezionati dell'organigramma.

Tipo: string
Predefinita: '#d6e9f8'
dimensioni

"small", "medium" o "large"

Tipo: string
Predefinita: 'medium'

Metodi

Metodo
collapse(row, collapsed)
Comprime o espande il nodo.
  • row: indice della riga da espandere o comprimere.
  • collapsed Indica se comprimere o espandere la riga, dove true significa comprimere.
Tipo di reso: none
draw(data, options)

Disegna il grafico.

Tipo di reso: none
getChildrenIndexes(row)

Restituisce un array con gli indici dei figli del nodo specificato.

Tipo di reso Array.<number>
getCollapsedNodes

Restituisce un array con l'elenco degli indici del nodo compresso.

Tipo di reso: Array.<number>
getSelection()

Implementazione standard di getSelection(). Gli elementi di selezione sono tutti elementi di riga. Può restituire più di una riga selezionata.

Tipo restituito: array di elementi di selezione
setSelection(selection)

Implementazione standard di setSelection() . Tratta ogni voce di selezione come una selezione di riga. Supporta la selezione di più righe.

Tipo di reso: nessuno

Eventi

Nome
comprimere

Evento attivato quando allowCollapse è impostato su true e l'utente fa doppio clic su un nodo con figli.

Proprietà:
collapsed: un valore booleano che indica se si tratta di un evento "compressione" o "espansione".
row: l'indice in base zero della riga nella tabella di dati, corrispondente al nodo su cui si fa 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 di dati, corrispondente al nodo su cui viene posizionato il mouse.
onmouseout

Si attiva quando l'utente passa il mouse fuori da una riga.

Proprietà:
row: l'indice in base zero della riga nella tabella di dati, corrispondente al nodo da cui si sposta il mouse in uscita.
select

Evento di selezione standard

Proprietà:
Nessun valore
pronta

Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo draw e richiamare i metodi solo dopo che l'evento è stato attivato.

Proprietà:
Nessun valore

Norme sui dati

Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.