Wykresy Gantta

Omówienie

Wykres Gantta to typ wykresu, który pokazuje rozbicie projektu na jego zadania składowe. Wykresy Gantta pokazują początkowe, końcowe i czasy trwania zadań w projekcie oraz pokazują ich zależności. Wykresy Google Gantt są renderowane w przeglądarce za pomocą SVG. Podobnie jak w przypadku wszystkich wykresów Google, gdy użytkownik najedzie kursorem na dane, Gantt wyświetla podpowiedzi.

Uwaga: wykresy Gantta nie będą działać w starszych wersjach Internet Explorera. (IE8 i starsze wersje nie obsługują SVG, co jest wymagane na wykresach Gantta).

Prosty 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':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources',
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Brak zależności

Aby utworzyć wykres Gantta, który nie wymaga zależności, sprawdź, czy ostatnia wartość w każdym wierszu w tabeli danych jest ustawiona na null. 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['2014Spring', 'Spring 2014', 'spring',
         new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
        ['2014Summer', 'Summer 2014', 'summer',
         new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
        ['2014Autumn', 'Autumn 2014', 'autumn',
         new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
        ['2014Winter', 'Winter 2014', 'winter',
         new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
        ['2015Spring', 'Spring 2015', 'spring',
         new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
        ['2015Summer', 'Summer 2015', 'summer',
         new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
        ['2015Autumn', 'Autumn 2015', 'autumn',
         new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
        ['2015Winter', 'Winter 2015', 'winter',
         new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
        ['Football', 'Football Season', 'sports',
         new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
        ['Baseball', 'Baseball Season', 'sports',
         new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
        ['Basketball', 'Basketball Season', 'sports',
         new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
        ['Hockey', 'Hockey Season', 'sports',
         new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
      ]);

      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Grupowanie zasobów

Zadania o podobnym charakterze można grupować za pomocą zasobów. Dodaj do danych kolumnę typu string (po kolumnach Task ID i Task Name) i sprawdź, czy wszystkie zadania, które powinny zostać pogrupowane w zasobie, mają ten sam identyfikator zasobu. Zasoby zostaną pogrupowane według koloru. 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources', null,
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper', 'write',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography', 'write',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper', 'complete',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper', 'write',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Obliczanie rozpoczęcia/zakończenia/czasu trwania

Wykresy Gantta akceptują 3 wartości związane z czasem trwania zadania: datę rozpoczęcia, datę zakończenia i czas trwania (w milisekundach). Jeśli na przykład nie ma daty rozpoczęcia, wykres może obliczyć brakujący czas na podstawie daty zakończenia i czasu trwania. To samo dotyczy obliczenia daty zakończenia. Jeśli podasz zarówno datę rozpoczęcia, jak i zakończenia, czas trwania może zostać obliczony między nimi.

W tabeli poniżej znajdziesz listę sposobów, w jakie Gantt obsługuje obecność początku, końca i czasu trwania w różnych okolicznościach.

Uruchom Koniec Czas trwania Wynik
Czas teraźniejszy Czas teraźniejszy Czas teraźniejszy Sprawdź, czy czas trwania jest zgodny z czasem rozpoczęcia/zakończenia. Wyrzuca błąd, jeśli jest niespójny.
Czas teraźniejszy Czas teraźniejszy Null Określa czas trwania od godziny rozpoczęcia do zakończenia.
Czas teraźniejszy Null Czas teraźniejszy Oblicza czas zakończenia.
Czas teraźniejszy Null Null Zgłasza błąd, bo nie można obliczyć czasu trwania lub czasu zakończenia.
Null Czas teraźniejszy Czas teraźniejszy Oblicza czas rozpoczęcia.
Null Null Czas teraźniejszy Oblicza czas rozpoczęcia na podstawie zależności. W połączeniu z zasadą defaultStartDate umożliwia rysowanie wykresu tylko z użyciem czasów trwania.
Null Czas teraźniejszy Null Wyświetla błąd, bo nie można obliczyć czasu rozpoczęcia ani czasu trwania.
Null Null Null Wyświetla błąd, bo nie można obliczyć czasu rozpoczęcia, zakończenia ani czasu trwania.

Biorąc pod uwagę powyższe informacje, możesz utworzyć wykres przedstawiający typowy dojazd do pracy, wykorzystując tylko czas trwania każdego zadania. 

<html>
  <head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load("current", { packages: ["gantt"] });
      google.charts.setOnLoadCallback(drawChart);

      function toMilliseconds(minutes) {
        return minutes * 60 * 1000;
      }

      function drawChart() {
        var otherData = new google.visualization.DataTable();
        otherData.addColumn("string", "Task ID");
        otherData.addColumn("string", "Task Name");
        otherData.addColumn("string", "Resource");
        otherData.addColumn("date", "Start");
        otherData.addColumn("date", "End");
        otherData.addColumn("number", "Duration");
        otherData.addColumn("number", "Percent Complete");
        otherData.addColumn("string", "Dependencies");

        otherData.addRows([
          [
            "toTrain",
            "Walk to train stop",
            "walk",
            null,
            null,
            toMilliseconds(5),
            100,
            null,
          ],
          [
            "music",
            "Listen to music",
            "music",
            null,
            null,
            toMilliseconds(70),
            100,
            null,
          ],
          [
            "wait",
            "Wait for train",
            "wait",
            null,
            null,
            toMilliseconds(10),
            100,
            "toTrain",
          ],
          [
            "train",
            "Train ride",
            "train",
            null,
            null,
            toMilliseconds(45),
            75,
            "wait",
          ],
          [
            "toWork",
            "Walk to work",
            "walk",
            null,
            null,
            toMilliseconds(10),
            0,
            "train",
          ],
          [
            "work",
            "Sit down at desk",
            null,
            null,
            null,
            toMilliseconds(2),
            0,
            "toWork",
          ],
        ]);

        var options = {
          height: 275,
          gantt: {
            defaultStartDate: new Date(2015, 3, 28),
          },
        };

        var chart = new google.visualization.Gantt(
          document.getElementById("chart_div")
        );

        chart.draw(otherData, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Ścieżka krytyczna

Ścieżka krytyczna wykresu Gantta to ścieżki, które bezpośrednio wpływają na datę zakończenia. Ścieżka krytyczna na wykresach Google Gantt jest domyślnie oznaczona kolorem czerwonym i można ją dostosować za pomocą opcji criticalPathStyle. Możesz też wyłączyć ścieżkę krytyczną, ustawiając criticalPathEnabled na false. 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

Strzałki stylu

Za pomocą opcji gantt.arrow możesz zmienić styl zależności między zadaniami: 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
            arrow: {
              angle: 100,
              width: 5,
              color: 'green',
              radius: 0
            }
          }
        };

Ścieżki stylu

Styl siatki jest obsługiwany przez kombinację innerGridHorizLine, innerGridTrack i innerGridDarkTrack. Gdy ustawisz tylko wartość innerGridTrack, wykres będzie obliczać ciemniejszy kolor innerGridDarkTrack, ale jeśli ustawisz tylko wartość innerGridDarkTrack, innerGridTrack będzie używać koloru domyślnego, a nie jaśniejszego. 

      var options = {
        height: 275,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
            stroke: '#ffe0b2',
            strokeWidth: 2
          },
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'}
        }
      };

Wczytuję

Nazwa pakietu google.charts.load to "gantt". 

  google.charts.load("current", {packages: ["gantt"]});

Nazwa klasy wizualizacji to google.visualization.Gantt.

  var chart = new google.visualization.Gantt(container);

Format danych

Wiersze: każdy wiersz w tabeli odpowiada zadanie.

Kolumny:

  Kolumna 0 Kolumna 1 Kolumna 2 Kolumna 3 Kolumna 4 Kolumna 5 Kolumna 6 Kolumna 7
Cel: Identyfikator zadania Nazwa zadania Identyfikator zasobu (opcjonalnie) Uruchom Koniec Czas trwania (w milisekundach) Procent ukończony Zależności
Typ danych: tekst tekst tekst data data liczba liczba tekst
Rola: domena dane dane dane dane dane dane dane

 

Opcje konfiguracji

Nazwa Typ Domyślna Opis
backgroundColor.fill tekst 'biały' Kolor wypełnienia wykresu w postaci koloru HTML.
Gangttarrow obiekt brak W przypadku wykresów szczegółowych gantt.arrow określa różne właściwości strzałek łączących zadania.
gantt.arrow.angle, liczba 45 Kąt grotu strzałki.
gantt.arrow.color tekst „#000” Kolor strzałek.
Gangtt.arrow.length liczba 8 Długość grotu strzałki.
Gangttarrow liczba 15 Promień definiowania krzywej między 2 zadaniami.
gantt.arrow.spaceAfter liczba 4 Wielkość odstępu między strzałką a zadaniem, na które wskazuje.
gantt.arrow.width liczba 1.4 Szerokość strzałek.
Gangtt.barCornerRadius liczba 2 Promień wyznaczający krzywe narożników słupka.
gantt.barHeight, liczba brak Wysokość słupków zadań.
gantt.krytyczneścieżka włączona wartość logiczna prawda Jeśli true ma strzałki w krytycznej ścieżce, ich styl jest inny.
gantt.krytyczneŚcieżkaŚcieżka obiekt brak Obiekt zawierający styl dowolnych strzałek ścieżki krytycznej.
gantt.krytyczneŚcieżkaŚcieżka.Styl tekst brak Kolor wszystkich strzałek ścieżki krytycznej.
gantt.krytyczneŚcieżkaŚcieżka.StylSzerokość liczba 1.4 Grubość strzałek o znaczeniu krytycznym.
gantt.defaultStartDate data/liczba brak Jeśli nie można obliczyć daty początkowej na podstawie wartości w tabeli danych, data rozpoczęcia zostanie ustawiona na tę datę. Może mieć wartość date (new Date(YYYY, M, D)) lub liczbę (w milisekundach).
Gangtt.innerGridHorizLine obiekt brak Określa styl wewnętrznych poziomych linii siatki.
gantt.innerGridHorizLine.style tekst brak Kolor poziomych linii siatki.
gantt.innerGridHorizLine.rayWidth, liczba 1 Szerokość wewnętrznych poziomych linii siatki.
gantt.innerGridTrack.fill tekst brak Kolor wypełnienia wewnętrznej siatki. Jeśli nie określono właściwości innerGridDarkTrack.fill, będzie ona stosowana do każdej ścieżki siatki.
gantt.innerGridDarkTrack.fill tekst brak Kolor wypełnienia alternatywnej, ciemnej ścieżki siatki.
gantt.labelMaxWidth, liczba 300 Maksymalna dozwolona ilość miejsca na każdą etykietę zadania.
gantt.labelStyle, obiekt brak

Obiekt zawierający style etykiet zadań.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled wartość logiczna prawda Wypełnia pasek zadań na podstawie wartości procentowej wykonanego zadania.
gantt.percentStyle.fill, tekst brak Kolor wartości procentowej ukończonej części paska zadań.
gantt.shadowEnabled wartość logiczna prawda Jeśli ma wartość true, na każdym pasku zadań rysowany jest cień, który zawiera zależności.
gantt.shadowColor, tekst „#000” Określa kolor cieni znajdujący się pod paskiem zadań z zależnościami.
Gangtt.shadowOffset liczba 1 Określa przesunięcie cieni (w pikselach) na dowolnym pasku zadań zawierającym zależności.
gantt.sortTasks. wartość logiczna prawda Określa, że zadania powinny być sortowane topologicznie, jeśli są poprawne. W przeciwnym razie użyj tej samej kolejności co w odpowiednich wierszach tabeli danych.
gantt.trackHeight, liczba brak Wysokość ścieżek.
szerokość liczba szerokość elementu zawierającego dane Szerokość wykresu w pikselach.
wysokość liczba wysokość elementu zawierającego wysokość wykresu podana w pikselach.

Metody

Metoda Opis
draw(data, options)

Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia ready. Extended description,

Typ zwrotu: brak
getSelection()

Zwraca tablicę wybranych elementów wykresu. Elementy, które można wybrać, to paski, legendy i kategorie. Na tym wykresie w danym momencie możesz wybrać tylko 1 element. Extended description.

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

Zaznacza określone elementy wykresu. Anuluje poprzedni wybór. Elementy, które można wybrać, to paski, legendy i kategorie. Na tym wykresie możesz wybrać tylko jeden element naraz. Extended description.

Typ zwrotu: brak
clearChart()

Czyści wykres i usuwa wszystkie przydzielone zasoby.

Typ zwrotu: brak

Zdarzenia

Zdarzenie Opis
click

Uruchamiane, gdy użytkownik kliknie wykres. Można jej użyć do określenia, kiedy kliknięty jest tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety.

Właściwości: targetID
error

Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd.

Właściwości: id, message
ready

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łanie ich dopiero po uruchomieniu zdarzenia.

Właściwości: brak
select

Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer getSelection().

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.