Wykresy Gantta

Omówienie

Wykres Gantta to typ wykresu ilustrujący podział projektu na zadania składowe. Wykresy Google Gantta ilustrują początek, koniec i czas trwania zadań w projekcie, a także wszelkie zależności, jakie może ono mieć. Wykresy Google Gantta są renderowane w przeglądarce za pomocą SVG. Podobnie jak wszystkie wykresy Google, wykresy Gantta wyświetlają etykietki, gdy użytkownik najedzie na dane.

Uwaga: Wykresy Gantta nie będą działać w starszych wersjach Internet Explorera. (IE8 i starsze wersje nie obsługują SVG, co wymaga wykresów 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 bez zależności, upewnij się, że ostatnia wartość każdego wiersza 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 mają zostać zgrupowane w zasób, 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 przyjmują 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 obliczania daty zakończenia. Jeśli podasz zarówno datę rozpoczęcia, jak i datę zakończenia, czas trwania można obliczyć między tymi datami.

W tabeli poniżej znajdziesz listę tego, jak Gant postępuje w przypadku obecności początku, końca i czasu trwania w różnych okolicznościach.

Uruchom Zakończ Czas trwania Wyniki
Wyświetl prezentację Wyświetl prezentację Wyświetl prezentację Sprawdź, czy czas trwania jest zgodny z godziną rozpoczęcia i zakończenia. W przypadku niespójności zwraca błąd.
Wyświetl prezentację Wyświetl prezentację Null Oblicza czas trwania od godziny rozpoczęcia i zakończenia.
Wyświetl prezentację Null Wyświetl prezentację Oblicza czas zakończenia.
Wyświetl prezentację Null Null Zgłasza błąd polegający na tym, że nie można obliczyć czasu trwania lub czasu zakończenia.
Null Wyświetl prezentację Wyświetl prezentację Oblicza czas rozpoczęcia.
Null Null Wyświetl prezentację Oblicza czas rozpoczęcia na podstawie zależności. W połączeniu z właściwością defaultStartDate umożliwia rysowanie wykresu tylko przy użyciu czasów trwania.
Null Wyświetl prezentację Null Zgłasza błąd polegający na tym, że nie można obliczyć czasu rozpoczęcia lub czasu trwania.
Null Null Null Zgłasza błąd polegający na tym, że nie można obliczyć czasu rozpoczęcia, zakończenia lub czasu trwania.

Mając to na uwadze, możesz utworzyć wykres przedstawiający typową trasę 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 na wykresie Gantta to ścieżki, które bezpośrednio wpływają na datę zakończenia. Ścieżka krytyczna na wykresach Google Gantta jest domyślnie w kolorze czerwonym. Można ją dostosować za pomocą opcji criticalPathStyle. Ścieżkę krytyczną możesz też wyłączyć, ustawiając criticalPathEnabled na false. 

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

Strzałki określające style

Możesz zmienić styl strzałek zależności między zadaniami za pomocą opcji gantt.arrow: 

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

Stylizacja ścieżek

Style siatki są obsługiwane za pomocą kombinacji atrybutów innerGridHorizLine, innerGridTrack i innerGridDarkTrack. Gdy ustawisz tylko innerGridTrack, na wykresie obliczymy ciemniejszy kolor dla danych innerGridDarkTrack. Jeśli ustawisz tylko kolor innerGridDarkTrack, innerGridTrack użyje koloru domyślnego i nie obliczy koloru 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 tabeli odpowiada zadaniu.

Kolumny:

  Kolumna 0 Kolumna 1 Kolumna 2 Kolumna 3 Kolumna 4 Kolumna 5 Kolumna 6 Kolumna 7
Przeznaczenie: Identyfikator zadania Nazwa zadania Identyfikator zasobu (opcjonalnie) Uruchom Zakończ Czas trwania (w milisekundach) Procent ukończenia Zależności
Typ danych: string, string, string, date date Liczba Liczba string,
Rola: domena dane dane dane dane dane dane dane

 

Opcje konfiguracji

Nazwa Typ Domyślne Opis
backgroundColor.fill string, 'biały' Kolor wypełnienia wykresu jako ciąg znaków HTML koloru.
gantt.arrow obiekt brak W przypadku wykresów Gantta zasada gantt.arrow kontroluje różne właściwości strzałek łączących zadania.
gantt.arrow.angle Liczba 45 Kąt łebka strzałki.
gantt.arrow.color string, „#000” Kolor strzałek.
gantt.arrow.length Liczba 8 Długość grotu strzałki.
gantt.arrow.radius Liczba 15 Promień definiowania krzywej strzałki między 2 zadaniami.
gantt.arrow.spaceAfter Liczba 4 Odstęp między głowicą strzałki a zadaniem, do którego ma ona służyć.
gantt.arrow.width Liczba 1.4 Szerokość strzałek.
gantt.barCornerRadius Liczba 2 Promień służący do definiowania krzywej narożników słupka.
gantt.barHeight Liczba brak Wysokość słupków zadań.
gantt.criticalPathEnabled boolean prawda Jeśli true, którekolwiek strzałki na ścieżce krytycznej będą miały inny styl.
gantt.criticalPathStyle obiekt brak Obiekt zawierający styl dla wszystkich strzałek ścieżki krytycznej.
gantt.criticalPathStyle.stroke string, brak Kolor dowolnych strzałek ścieżki krytycznej.
gantt.criticalPathStyle.strokeWidth Liczba 1.4 Grubość wszystkich strzałek krytycznej ścieżki.
gantt.defaultStartDate data/numer brak Jeśli nie można obliczyć daty rozpoczęcia na podstawie wartości w tabeli DataTable, zostanie ona ustawiona na taką datę. Akceptuje wartość date (new Date(YYYY, M, D)) lub liczbę, która jest używana w milisekundach.
gantt.innerGridHorizLine obiekt brak Określa styl wewnętrznych poziomych linii siatki.
gantt.innerGridHorizLine.stroke string, brak Kolor wewnętrznych poziomych linii siatki.
gantt.innerGridHorizLine.strokeWidth Liczba 1 Szerokość wewnętrznych poziomych linii siatki.
gantt.innerGridTrack.fill string, brak Kolor wypełnienia wewnętrznej ścieżki siatki. Jeśli nie określisz elementu innerGridDarkTrack.fill, zostanie on zastosowany do każdej ścieżki siatki.
gantt.innerGridDarkTrack.fill string, brak Kolor wypełnienia innej, ciemnej wewnętrznej ścieżki siatki.
gantt.labelMaxWidth Liczba 300 Maksymalna 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 boolean prawda Wypełnia pasek aplikacji na podstawie odsetka ukończenia zadania.
gantt.percentStyle.fill string, brak Kolor odsetka ukończonych elementów na pasku zadań.
gantt.shadowEnabled boolean prawda Jeśli zasada ma wartość true, pod każdym paskiem zadań, który zawiera zależności, rysuje cień.
gantt.shadowColor string, „#000” Określa kolor cieni pod dowolnym paskiem zadań, w przypadku którego występują zależności.
gantt.shadowOffset Liczba 1 Określa odsunięcie cieni pod paskiem zadań, w przypadku którego występują zależności, w pikselach.
gantt.sortTasks boolean prawda Określa, że zadania powinny być sortowane topologicznie (jeśli jest prawda). W przeciwnym razie używana jest ta sama kolejność co w odpowiednich wierszach tabeli DataTable.
gantt.trackHeight Liczba brak Wysokość torów.
szerokość Liczba szerokość elementu Szerokość wykresu w pikselach.
wysokość Liczba wysokość elementu, wysokość wykresu w pikselach.

Metody

Metoda Opis
draw(data, options)

Rysuje wykres. Wykres akceptuje kolejne wywołania metod dopiero po wywołaniu zdarzenia ready. Extended description.

Return Type: brak
getSelection()

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

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

Wybiera określone elementy wykresu. Anuluje wcześniejszy wybór. Elementy, które można wybrać, to paski, wpisy z legendy i kategorie. Na tym wykresie można wybrać tylko 1 element naraz. Extended description

Return Type: brak
clearChart()

Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby.

Return Type: brak

Zdarzenia

Zdarzenie Opis
click

Uruchamiane, gdy użytkownik kliknie wykres. Pozwala określić, kiedy klikane są tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety.

Właściwości: targetID
error

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

Właściwości: identyfikator, komunikat
ready

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 je dopiero po wywołaniu 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 na żaden serwer.