Gantt Listeleri

Genel bakış

Gantt şeması, bir projenin bileşenlerinin görevlerine dökümünü gösteren bir grafik türüdür. Google Gantt şemaları, bir projedeki görevlerin başlangıcını, bitişini ve süresini ve bu görevlerin sahip olabileceği bağımlılıkları gösterir. Google Gantt grafikleri, tarayıcıda SVG kullanılarak oluşturulur. Tüm Google grafiklerinde olduğu gibi, Gantt grafikleri de kullanıcı verilerin üzerine geldiğinde ipuçları görüntüler.

Not: Gantt şemaları, Internet Explorer'ın eski sürümlerinde çalışmaz. (IE8 ve önceki sürümler, Gantt şemalarının gerektirdiği SVG'yi desteklemez.)

Basit bir örnek

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

Bağımlılık yok

Bağımlılık içermeyen bir Gantt şeması oluşturmak için Veri Tablonuzdaki her bir satırın son değerinin null olarak ayarlandığından emin olun. 

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

Kaynakları gruplandırma

Yapıları benzer olan görevler, kaynaklar kullanılarak birlikte gruplandırılabilir. Verilerinize string türünde bir sütun ekleyin (Task ID ve Task Name sütunlarından sonra) ve kaynak olarak gruplandırılması gereken tüm görevlerin aynı kaynak kimliğine sahip olduğundan emin olun. Kaynaklar renge göre gruplandırılır. 

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

Başlangıç/bitiş/süre hesaplama

Gantt şemaları görevin süresiyle ilgili üç değeri kabul eder: başlangıç tarihi, bitiş tarihi ve süre (milisaniye cinsinden). Örneğin, başlangıç tarihi yoksa grafik, eksik zamanı bitiş tarihine ve süreye göre hesaplayabilir. Aynı durum bitiş tarihinin hesaplanmasında da geçerlidir. Hem başlangıç hem de bitiş tarihi sağlanırsa süre, ikisi arasında hesaplanabilir.

Gantt'ın farklı durumlarda başlangıç, bitiş ve süre varlığını nasıl ele aldığının listesini görmek için aşağıdaki tabloya bakın.

Başlangıç Sonlandır Süre Sonuç
Göster Göster Göster Sürenin başlangıç/bitiş zamanlarıyla tutarlı olduğundan emin olun. Tutarsızsa hata döndürür.
Göster Göster Boş Başlangıç ve bitiş zamanlarından itibaren süreyi hesaplar.
Göster Boş Göster Bitiş zamanını hesaplar.
Göster Boş Boş Süre veya bitiş zamanı hesaplanamıyor olarak hata döndürür.
Boş Göster Göster Başlangıç zamanını hesaplar.
Boş Boş Göster Bağımlılıklara göre başlangıç zamanını hesaplar. defaultStartDate ile birlikte, grafiğin yalnızca süre kullanılarak çizilebilmesini sağlar.
Boş Göster Boş Başlangıç zamanı veya süre hesaplanamadı olarak hata döndürür.
Boş Boş Boş Başlangıç zamanı, bitiş zamanı veya süre hesaplanamadı olarak hata döndürür.

Yukarıdakileri göz önünde bulundurarak, yalnızca her bir görevin süresini kullanarak işe gidip gelmeye ilişkin tipik bir yol sunan bir grafik oluşturabilirsiniz. 

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

Kritik yol

Gantt şemasındaki kritik yol, bitiş tarihini doğrudan etkileyen yol veya yollardır. Google Gantt şemalarındaki kritik yol, varsayılan olarak kırmızı renktedir ve criticalPathStyle seçenekleri kullanılarak özelleştirilebilir. Ayrıca criticalPathEnabled değerini false olarak ayarlayarak kritik yolu kapatabilirsiniz. 

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

Okların stilini belirleme

gantt.arrow seçeneklerini kullanarak görevler arasındaki bağımlılık oklarının stilini belirleyebilirsiniz: 

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

Parçaların stilini belirleme

Izgara stili; innerGridHorizLine, innerGridTrack ve innerGridDarkTrack kombinasyonuyla yönetilir. Yalnızca innerGridTrack ayarlandığında grafik, innerGridDarkTrack için daha koyu bir renk hesaplar. Ancak yalnızca innerGridDarkTrack ayarlandığında innerGridTrack, kendi varsayılan rengini kullanır ve daha açık bir renk hesaplamaz. 

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

Yükleniyor

google.charts.load paketinin adı: "gantt". 

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

Görselleştirmenin sınıf adı: google.visualization.Gantt.

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

Veri biçimi

Satırlar: Tablodaki her satır bir görevi temsil eder.

Sütunlar:

  Sütun 0 1. Sütun 2. Sütun 3. Sütun 4. Sütun 5. sütun 6. Sütun 7. Sütun
Amaç: Görev Kimliği Görev Adı Kaynak kimliği (isteğe bağlı) Başlangıç Sonlandır Süre (milisaniye cinsinden) Tamamlanan Yüzde Bağımlılıklar
Veri Türü: dize dize dize tarih tarih sayı sayı dize
Rol: alan veri veri veri veri veri veri veri

 

Yapılandırma seçenekleri

Ad Tür Varsayılan Açıklama
backgroundColor.fill dize "white" (beyaz) HTML renk dizesi olarak grafik dolgu rengi.
gantt.arrow nesne null Gantt şemaları için gantt.arrow, görevleri bağlayan okların çeşitli özelliklerini kontrol eder.
gantt.arrow.angle sayı 45 Okun başının açısı.
gantt.arrow.color dize "#000" Okların rengi.
gantt.arrow.length sayı 8 Okun başının uzunluğu.
gantt.arrow.radius sayı 15 İki görev arasındaki okun eğrisini tanımlamak için kullanılacak yarıçap.
gantt.arrow.spaceAfter sayı 4 Bir okun başı ile işaret ettiği görev arasındaki boşluk miktarı.
gantt.arrow.width sayı 1.4 Okların genişliği.
gantt.barCornerRadius sayı 2 Bir çubuğun köşelerinin eğrisini tanımlamak için kullanılacak yarıçap.
gantt.barHeight sayı null Görevlere ilişkin çubukların yüksekliği.
gantt.criticalPathEnabled boolean true true ise kritik yoldaki tüm okların stili farklı şekilde belirlenir.
gantt.criticalPathStyle nesne null Kritik yol oklarının stilini içeren nesne.
gantt.criticalPathStyle.stroke dize null Kritik yol oklarının rengi.
gantt.criticalPathStyle.strokeWidth sayı 1.4 Kritik yol oklarının kalınlığı.
gantt.defaultStartDate tarih/numara null Veri Tablosu'ndaki değerlerden başlangıç tarihi hesaplanamıyorsa başlangıç tarihi buna ayarlanır. date değerini (new Date(YYYY, M, D)) veya kullanılacak milisaniye sayısı olan sayıyı kabul eder.
gantt.innerGridHorizLine nesne null İç yatay ızgara çizgilerinin stilini tanımlar.
gantt.innerGridHorizLine.stroke dize null İç yatay kılavuz çizgilerinin rengi.
gantt.innerGridHorizLine.strokeWidth sayı 1 İç yatay kılavuz çizgilerinin genişliği.
gantt.innerGridTrack.fill dize null İç ızgara yolunun dolgu rengi. innerGridDarkTrack.fill belirtilmezse bu işlem her ızgara kanalına uygulanır.
gantt.innerGridDarkTrack.fill dize null Alternatif, koyu iç ızgara yolunun dolgu rengi.
gantt.labelMaxWidth sayı 300 Her görev etiketi için izin verilen maksimum alan miktarı.
gantt.labelStyle nesne null

Görev etiketlerinin stillerini içeren bir nesne.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean true Görev için tamamlanan yüzdeye göre görev çubuğunu doldurur.
gantt.percentStyle.fill dize null Görev çubuğunun tamamlanan yüzde bölümünün rengi.
gantt.shadowEnabled boolean true true değerine ayarlanırsa her görev çubuğunun altına bağımlılıkları olan bir gölge çizer.
gantt.shadowColor dize "#000" Bağımlılıkları olan görev çubuklarının altındaki gölgelerin rengini tanımlar.
gantt.shadowOffset sayı 1 Bağımlılıkları olan herhangi bir görev çubuğunun altındaki gölgelerin ofsetini piksel cinsinden tanımlar.
gantt.sortTasks boolean true Görevlerin, doğruysa topolojik olarak sıralanması gerektiğini, aksi takdirde DataTable'ın karşılık gelen satırlarıyla aynı sıralamayı kullanmasını belirtir.
gantt.trackHeight sayı null Kanalların yüksekliği.
genişlik sayı kapsayıcı öğenin genişliği Grafiğin piksel cinsinden genişliği.
yükseklik sayı kapsayıcı öğenin yüksekliği grafiğin piksel cinsinden yüksekliği.

Yöntemler

Yöntem Açıklama
draw(data, options)

Grafiği çizer. Grafik, yalnızca ready etkinliği etkinleştikten sonra başka yöntem çağrılarını kabul eder. Extended description.

Return Type (Dönüş Türü): yok
getSelection()

Seçilen grafik varlıklarından oluşan bir dizi döndürür. Seçilebilir varlıklar çubuklar, gösterge girişleri ve kategorilerdir. Bu grafik için aynı anda yalnızca bir öğe seçilebilir. Extended description .

Dönüş Türü: Seçim öğeleri dizisi
setSelection()

Belirtilen grafik varlıklarını seçer. Önceki seçimleri iptal eder. Seçilebilir varlıklar çubuklar, gösterge girişleri ve kategorilerdir. Bu grafik için aynı anda yalnızca bir öğe seçilebilir. Extended description .

Return Type (Dönüş Türü): yok
clearChart()

Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır.

Return Type (Dönüş Türü): yok

Etkinlikler

Etkinlik Açıklama
click

Kullanıcı grafiğin içini tıkladığında tetiklenir. Başlığın, veri öğelerinin, gösterge girişlerinin, eksenlerin, kılavuz çizgilerinin veya etiketlerin ne zaman tıklandığını tanımlamak için kullanılabilir.

Özellikler: targetID
error

Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir.

Özellikler: kimlik, mesaj
ready

Grafik, harici yöntem çağrıları için hazır. Grafikle etkileşim kurmak ve çizdikten sonra yöntemleri çağırmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir işleyici ayarlamalı ve bunları yalnızca etkinlik tetiklendikten sonra çağırmalısınız.

Özellikler: yok
select

Kullanıcı bir görsel öğeyi tıkladığında tetiklenir. Neyin seçildiğini öğrenmek için getSelection() numaralı telefonu arayın.

Özellikler: yok

Veri politikası

Tüm kod ve veriler tarayıcıda işlenip oluşturulur. Herhangi bir sunucuya veri gönderilmez.