Gantt Listeleri

Genel bakış

Gantt şeması bir projenin bileşen görevlerine göre dökümünü gösteren bir grafik türüdür. Google Gantt grafikleri bir görevdeki başlangıç, bitiş ve sürenin yanı sıra bir görevin sahip olabileceği bağımlıları gösterir. Google Gantt grafikleri, SVG kullanılarak tarayıcıda oluşturulur. Tüm Google grafikleri gibi, Gantt grafikleri de kullanıcı verilerin üzerine geldiğinde ipuçlarını gösterir.

Not: Gantt Listeleri Internet Explorer'ın eski sürümlerinde çalışmaz. (IE8 ve önceki sürümler, Gantt Listeleri'nin 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ı olmayan bir Gantt grafiği oluşturmak için DataTable'ınızdaki her satıra ait son değerin 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>

Gruplandırma kaynakları

Doğası gereği benzer olan görevler, kaynaklar kullanılarak birlikte gruplandırılabilir. Verilerinize string türünde bir sütun (Task ID ve Task Name sütunlarının sonuna) ekleyin ve bir kaynakta gruplanması 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>

İşlemin başlangıç/bitiş/süresimi

Gantt grafikleri görev 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 tarihi bitiş tarihine ve süreye göre hesaplayabilir. Aynısı, bitiş tarihinin hesaplanması için de geçerlidir. Hem başlangıç hem de bitiş tarihi verilirse süre, ikisi arasında hesaplanabilir.

Gantt'ın farklı durumlarda başlangıç, bitiş ve sürenin nasıl ele alınacağının listesini aşağıdaki tabloda bulabilirsiniz.

Başlat Bitiş Süre Sonuç
Şimdiki Zaman Şimdiki Zaman Şimdiki Zaman Sürenin başlangıç/bitiş zamanlarıyla tutarlı olduğundan emin olun. Tutarsızsa hata verir.
Şimdiki Zaman Şimdiki Zaman Boş Başlangıç ve bitiş zamanlarını hesaplar.
Şimdiki Zaman Boş Şimdiki Zaman İşlem bitiş zamanı.
Şimdiki Zaman Boş Boş Süre veya bitiş zamanı hesaplanamadı olarak hata gösterir.
Boş Şimdiki Zaman Şimdiki Zaman İşlem başlangıç zamanı.
Boş Boş Şimdiki Zaman Başlangıç zamanını bağımlılıklara göre hesaplar. defaultStartDate ile birlikte grafiğin yalnızca süreler kullanılarak çizilebilmesini sağlar.
Boş Şimdiki Zaman Boş Başlangıç zamanı veya süresi hesaplanamadığından hata verir.
Boş Boş Boş Başlangıç zamanı, bitiş zamanı veya süre hesaplanamadığından hata verir.

Yukarıdaki noktaları göz önünde bulundurarak, her görevin süresini kullanarak işe gidip gelmeyle ilgili genel bilgileri gösteren 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 grafiğindeki kritik yol, bitiş tarihini doğrudan etkileyen yoldur. Google Gantt grafiklerindeki kritik yol varsayılan olarak kırmızı renktedir ve criticalPathStyle seçenekleri kullanılarak özelleştirilebilir. Ayrıca, criticalPathEnabled özelliğini false olarak ayarlayarak kritik yolu kapatabilirsiniz. 

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

Stil özellikleri

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 kombinasyonu tarafından işlenir. Yalnızca innerGridTrack ayarlandığında, grafik innerGridDarkTrack için daha koyu bir renk hesaplar, ancak yalnızca innerGridDarkTrack ayarlandığında innerGridTrack 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 paket 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 Sütun 6 Sütun 7
Amaç: Görev Kimliği Görev Adı Kaynak kimliği (isteğe bağlı) Başlat Bitiş Süre (milisaniye cinsinden) Tamamlanan Yüzde Bağımlılıklar
Veri Türü: string string string date date number (sayı) number (sayı) string
Rol: alan veri veri veri veri veri veri veri

 

Yapılandırma seçenekleri

Ad Tür Varsayılan Açıklama
arka plan Rengi.dolgu string "beyaz" HTML renk dizesi olarak grafik dolgu rengi.
gantt.arrow nesne boş Gantt Listeleri için gantt.arrow, görevleri bağlayan okların çeşitli özelliklerini kontrol eder.
gantt.arrow.angle number (sayı) 45 Ok başının açısı.
gantt.arrow.color string "#000" Okların rengi.
gantt.arrow.uzunluk number (sayı) 8 Ok başının uzunluğu.
gantt.arrow.yarış number (sayı) 15 İki görev arasındaki ok eğrisini tanımlayan yarıçap.
gantt.arrow.spaceAfter number (sayı) 4 Ok başı ile işaret ettiği görev arasındaki boşluk miktarı.
gantt.arrow.genişliği number (sayı) 1,4 Okların genişliği.
gantt.barCornerRadius number (sayı) 2 Bir çubuğun köşelerinin eğrisini tanımlayan yarıçap.
gantt.barYükseklik number (sayı) boş Görevler için çubukların yüksekliği.
gantt.KritikYolEtkin boolean true true Kritik yoldaki okların stilleri farklı şekilde ayarlanır.
gantt.KritikYol Stili nesne boş Tüm kritik yol oklarının stilini içeren bir nesne.
gantt.criPathStyle.stroke string boş Kritik yol oklarının rengi.
gantt.criPathStyle.strokeGenişliği number (sayı) 1,4 Kritik yol oklarının kalınlığı.
gantt.defaultStartDate tarih/sayı boş Başlangıç tarihi, DataTable'daki değerlerden hesaplanamıyorsa başlangıç tarihi şu şekilde ayarlanır. date değerini (new Date(YYYY, M, D)) veya kullanılacak milisaniye sayısını içeren bir sayıyı kabul eder.
gantt.internalCURHorizLine nesne boş İç yatay ızgara çizgilerinin stilini tanımlar.
gantt.internalCURHorizLine.stroke string boş İç yatay ızgara çizgilerinin rengi.
gantt.internalCURHorizLine.strokeGenişliği number (sayı) 1 İç yatay ızgara çizgilerinin genişliği.
gantt.internalCURTrack.fill string boş İç ızgara kanalının dolgu rengi. innerGridDarkTrack.fill özelliği belirtilmezse her ızgara kanalına uygulanır.
gantt.internalCURDarkTrack.fill string boş Alternatif, koyu iç mekan ızgara kanalının dolgu rengi.
gantt.labelMaxGenişlik number (sayı) 300 Her görev etiketi için izin verilen maksimum alan.
gantt.labelStil nesne boş

Görev etiketleri için stilleri içeren bir nesne.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean true Görev çubuğunu, görev için tamamlanan yüzdeye göre doldurur.
gantt.percentStyle.fill string boş Görev çubuğunun tamamlanan bölümünün yüzdesinin rengi.
gantt.gövde boolean true true olarak ayarlanırsa bağımlıları olan her görev çubuğunun altına bir gölge çizer.
gantt.gölge string "#000" Bağımlı olan herhangi bir görev çubuğunun altındaki gölgelerin rengini tanımlar.
gantt.girginlik number (sayı) 1 Bağımlı olan herhangi bir görev çubuğunun altında gölgelerin ofsetini piksel cinsinden tanımlar.
gantt.sortTasks boolean true Doğruysa, görevlerin topolojik olarak sıralanması gerektiğini belirtir. Aksi takdirde, DataTable'ın karşılık gelen satırlarıyla aynı sırayı kullanır.
gantt.trackHeight number (sayı) boş Parçaların yüksekliği.
genişlik number (sayı) bulunan öğenin genişliği Grafiğin piksel cinsinden genişliği.
yükseklik number (sayı) bulunan öğ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 readyetkinliği tetiklendikten sonra gerçekleştirilen diğer yöntem çağrılarını kabul eder. Extended description dokunun.

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

Seçilen grafik varlıklarından oluşan bir diziyi döndürür. Seçilebilir öğeler çubuklar, açıklama girişi ve kategorilerdir. Bu grafik için herhangi bir zamanda yalnızca bir varlık seçilebilir. Extended description .

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

Belirtilen grafik öğelerini seçer. Önceki seçimleri iptal eder. Seçilebilir öğeler çubuklar, açıklama girişi ve kategorilerdir. Bu grafik için tek seferde yalnızca bir öğe seçilebilir. Extended description .

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

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

Dönüş Türü: yok

Etkinlikler

Etkinlik Açıklama
click

Kullanıcı grafiğin içini tıkladığında tetiklenir. Başlık, veri öğeleri, gösterge girişleri, eksenler, kılavuz çizgileri veya etiketlerin ne zaman tıklandığını belirlemek 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. Grafik ve çizim yöntemlerinden sonra etkileşimde bulunmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir dinleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra kullanmanız gerekir.

Özellikler: yok
select

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

Özellikler: yok

Veri politikası

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