Organigramma

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 allowHtml=true per farlo funzionare e devi configurarla prima di chiamare draw() nella visualizzazione. Questa operazione sostituisce l'opzione selectionColor per il nodo specificato.

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

style

Si applica a: riga DataTable

Una stringa di stile incorporata da assegnare a un nodo specifico. Questa proprietà è sostituita dalla proprietà selectedStyle. Devi impostare l'opzione allowHtml=true affinché questa operazione funzioni e deve essere configurata prima di chiamare draw() nella visualizzazione. Questa operazione sostituisce l'opzione color per il nodo specificato.

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

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.
  • row: indice della riga per espandersi o comprimerla.
  • collapsed Indica se comprimere o espandere la riga, dove true significa comprimerla.
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 getSelection() standard. Gli elementi di selezione sono tutti elementi di riga. Può restituire più di una riga selezionata.

Tipo di reso: 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
comprimi

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 "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 draw e di chiamare i metodi solo dopo l'attivazione dell'evento.

Proprietà:
Nessuno

Norme sui dati

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