Wykres organizacyjny

Omówienie

Wykresy organizacji to diagramy odzwierciedlające hierarchię węzłów, które są używane do przedstawiania w organizacji nadrzędnych/podrzędnych relacji. Drzewo rodzin to rodzaj wykresu organizacyjnego.

Przykład

 
<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>

Wczytuję

Nazwa pakietu to 'orgchart'.

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

Nazwa klasy wizualizacji to google.visualization.OrgChart.

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

Format danych

Tabela z 3 kolumnami ciągu, w której każdy wiersz reprezentuje węzeł na wykresie organizacyjnym. Dostępne są te 3 kolumny:

  • Kolumna 0 – identyfikator węzła. Powinien być unikalny wśród wszystkich węzłów i może zawierać dowolne znaki, w tym spacje. Jest to widoczne w węźle. Zamiast tego możesz podać wartość sformatowaną na wykresie, ale wartość niesformatowana jest używana jako identyfikator.
  • Kolumna 1 – [opcjonalny] – identyfikator węzła nadrzędnego. Powinna to być niesformatowana wartość z kolumny 0 w innym wierszu. W przypadku węzła głównego pozostaw nieokreślone dane.
  • Kolumna 2 – [opcjonalny] tekst wskazówek, które wyświetlają się, gdy użytkownik najedzie na ten węzeł.

Każdy węzeł może mieć 0 lub 1 węzeł nadrzędny i 0 lub więcej węzłów podrzędnych.

Właściwości niestandardowe

Do elementów tabeli danych możesz przypisać te właściwości niestandardowe za pomocą metody setProperty() w DataTable:

Nazwa usługi
wybranyStyl

Obejmuje: wiersz Tabela danych

Wbudowany ciąg znaków do przypisania do określonego węzła po wybraniu. Aby funkcja działała, musisz ustawić opcję allowHtml=true. Musi ona też być ustawiona przed wywołaniem właściwości draw() na wizualizacji. Ta opcja zastępuje opcję selectionColor dla określonego węzła.

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

styl

Obejmuje: wiersz Tabela danych

Wbudowany ciąg znaków do przypisania do określonego węzła. Ta właściwość jest zastępowana przez właściwość selectedStyle. Aby funkcja działała, musisz ustawić opcję allowHtml=true. Musi ona też być ustawiona przed wywołaniem metody draw() na wizualizacji. Ta opcja zastępuje opcję color dla określonego węzła.

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

Opcje konfiguracji

Nazwa
allowZwiń

Określa, czy dwukrotne kliknięcie zwinie węzeł.

Typ: boolean
Domyślne: false
allowHTML

Jeśli ma wartość Prawda, nazwy zawierające tagi HTML są renderowane jako HTML.

Typ: boolean
Domyślne: false
kolor

Wycofane. Zamiast tego użyj nodeClass. Kolor tła elementów tabel wykresów.

Typ: string
Domyślne: '#edf7ff'
[kompaktowe] wiersze

Jeśli ma wartość Prawda, drzewa podrzędne są umieszczone jak najbliżej siebie, o ile węzły się nie nakładają. Za pomocą tej opcji możesz zmniejszyć ogólną szerokość rysunku i długość krawędzi.

Typ: boolean
Domyślne: false
klasa węzła

Nazwa klasy, którą można przypisać do elementów węzła. Zastosuj CSS do tej nazwy klasy, by określić kolory lub style elementów wykresu.

Typ: string
Domyślne: default class name
selectedNodeClass

Nazwa klasy, którą można przypisać do wybranych elementów węzła. Zastosuj CSS do tej nazwy klasy, by określić kolory lub style wybranych elementów wykresu.

Typ: string
Domyślne: default class name
wybór kolorów

Wycofane. Zamiast tego użyj selectedNodeClass. Kolor tła wybranych elementów wykresu organizacyjnego.

Typ: string
Domyślne: '#d6e9f8'
rozmiar

„mały”, „średni” lub „duży”

Typ: string
Domyślne: 'medium'

Metody

Metoda
collapse(row, collapsed)
Zwija lub rozwija węzeł.
  • row – indeks wiersza do zwijania lub zwijania.
  • collapsed Określa, czy zwijać czy rozwijać wiersz, gdzie „prawda” oznacza zwinięcie.
Typ zwrotu: none
draw(data, options)

Rysuje wykres.

Typ zwrotu: none
getChildrenIndexes(row)

Zwraca tablicę z indeksami elementów podrzędnych danego węzła.

Typ zwrotu Array.<number>
getCollapsedNodes

Zwraca tablicę z listą indeksów zwiniętego węzła.

Typ zwrotu: Array.<number>
getSelection()

Standardowa implementacja getSelection(). Elementy wyboru to wszystkie wiersze. Może zwrócić więcej niż 1 wybrany wiersz.

Typ zwrotu: tablica elementów wyboru.
setSelection(selection)

Standardowa implementacja setSelection(). Traktuje wszystkie zaznaczenia jako zaznaczenie wierszy. Obsługuje wybór wielu wierszy.

Typ zwrotu: brak

Zdarzenia

Nazwa
zwiń

Zdarzenie wywoływane wtedy, gdy zasada allowCollapse ma wartość true, a użytkownik klika dwukrotnie węzeł z elementami podrzędnymi.

Właściwości:
collapsed – wartość logiczna wskazująca, czy jest to „zwinięcie” czy „rozwinięcie”.
row – oparty na zero indeks wiersza w tabeli danych odpowiadający klikniętemu węzełowi.
Onmouseover

Wywoływane, gdy użytkownik najedzie na określony wiersz.

Właściwości:
row – oparty na zerowym indeksie wiersza w tabeli danych, który jest węzłem myszy.
Onmouseout

Wywoływane, gdy użytkownik najedzie na wiersz.

Właściwości:
row – indeks oparty na zerowym wierszu wiersza w tabeli danych, który zawiera węzeł, z którego usunięto kursor myszy.
wybierz

Standardowe zdarzenie wyboru

Właściwości:
Brak
gotowa

Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik tego zdarzenia przed wywołaniem metody draw i wywołaniem metod dopiero po wywołaniu zdarzenia.

Właściwości:
Brak

Zasady dotyczące danych

Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane do żadnego serwera.