Wykres organizacyjny

Omówienie

Wykresy organizacyjne to diagramy hierarchii węzłów często używane do przedstawiania relacji nadrzędnych/podrzędnych w organizacji. Drzewo genealogiczne 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 z ciągami znaków, z których każdy reprezentuje węzeł na wykresie organizacyjnym. Oto 3 kolumny:

  • Kolumna 0 – identyfikator węzła. Powinien być niepowtarzalny wśród wszystkich węzłów i może zawierać dowolne znaki, w tym spacje. Wyświetlana w węźle. Możesz zamiast tego określić sformatowaną wartość, która będzie wyświetlana na wykresie, ale wartość niesformatowana będzie nadal używana jako identyfikator.
  • Kolumna 1 – [opcjonalnie] identyfikator węzła nadrzędnego. Powinna to być niesformatowana wartość z kolumny 0 innego wiersza. Pozostaw nieokreślony dla węzła głównego.
  • Kolumna 2 – [opcjonalnie] tekst podpowiedzi, który wyświetla się, gdy użytkownik najedzie kursorem 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

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

Nazwa właściwości
selectedStyle

Dotyczy: wiersz tabeli danych

Wbudowany ciąg znaków stylu, który ma zostać przypisany do określonego węzła po wybraniu. Aby to działało, musisz ustawić opcję allowHtml=true i ustawić ją przed wywołaniem metody draw() w wizualizacji. Zastępuje to opcję selectionColor w przypadku określonego węzła.

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

styl

Dotyczy: wiersz tabeli danych

Wbudowany ciąg znaków stylu, który ma zostać przypisany do określonego węzła. Zastąpiła ją właściwość selectedStyle. Aby to działało, musisz ustawić opcję allowHtml=true i ustawić ją przed wywołaniem funkcji draw() w wizualizacji. Zastępuje to opcję color w przypadku określonego węzła.

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

Opcje konfiguracji

Nazwa
allowCollapse

Określa, czy dwukrotne kliknięcie spowoduje zwinięcie węzła.

Typ: boolean
Wartość domyślna: false
allowHtml

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

Typ: boolean
Wartość domyślna: false
kolor

Wycofano. Zamiast tego użyj nodeClass. Kolor tła elementów wykresu organizacyjnego.

Typ: string
Wartość domyślna: '#edf7ff'
compactRows

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

Typ: boolean
Wartość domyślna: false
nodeClass

Nazwa klasy do przypisania do elementów węzła. Zastosuj CSS do nazwy klasy, aby określić kolory lub style elementów wykresu.

Typ: string
Wartość domyślna: default class name
selectedNodeClass

Nazwa klasy do przypisania do wybranych elementów węzła. Zastosuj CSS do nazwy klasy, aby określić kolory lub style wybranych elementów wykresu.

Typ: string
Wartość domyślna: default class name
selectionColor

Wycofano. Użyj wybranego węzła. Kolor tła wybranych elementów wykresu organizacyjnego.

Typ: string
Wartość domyślna: '#d6e9f8'
rozmiar

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

Typ: string
Wartość domyślna: 'medium'

Metody

Metoda
collapse(row, collapsed)
Zwija lub rozwija węzeł.
  • row – indeks wiersza do rozwinięcia lub zwinięcia.
  • collapsed Określa, czy wiersz ma być zwijany, czy rozwijany, gdzie wartość true oznacza zwijanie.
Typ zwrotu: none
draw(data, options)

Rysuje wykres.

Typ zwrotu: none
getChildrenIndexes(row)

Zwraca tablicę z indeksami podrzędnymi 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()

Implementacja standardowa getSelection(). Zaznaczone elementy to wszystkie elementy wiersza. Może zwrócić więcej niż jeden wybrany wiersz.

Return Type: tablica elementów zaznaczenia.
setSelection(selection)

Standardowa implementacja setSelection() . Traktuje każdą pozycję zaznaczenia jako zaznaczenie wiersza. Obsługuje zaznaczenie wielu wierszy.

Return Type: brak

Zdarzenia

Nazwa
zwiń

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

Usługi:
collapsed – wartość logiczna wskazująca, czy jest to zdarzenie „zwinięcia” czy „expand”.
row – liczony od zera indeks wiersza w tabeli danych odpowiadający klikanemu węzłowi.
onmouseover

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

Usługi:
row – liczony od zera indeks wiersza w tabeli danych odpowiadający węzłowi po najechaniu kursorem myszy.
onmouseout

Wywoływane, gdy użytkownik najedzie kursorem poza wiersz.

Usługi:
row – liczony od zera indeks wiersza w tabeli danych odpowiadający węzełowi wysuniętego kursorem myszy.
wybierz

Standardowe zdarzenie wyboru

Usługi:
Brak
gotowa

Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody draw i wywołaj metody dopiero po wywołaniu zdarzenia.

Usługi:
Brak

Zasady dotyczące danych

Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.