Ta strona została przetłumaczona przez Cloud Translation API.

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

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

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

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

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

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

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

function drawChart() {

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

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

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

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

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

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

function drawChart() {

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

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

chart.draw(data, options);
      }

        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:

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

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

function drawChart() {

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

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

chart.draw(data, options);
      }

        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.

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

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

function drawChart() {

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

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

chart.draw(data, options);
    }

      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.