Diagram Gantt

Ringkasan

Diagram gantt adalah jenis diagram yang menggambarkan pengelompokan project ke dalam tugas komponennya. Diagram Google Gantt mengilustrasikan awal, akhir, dan durasi tugas dalam sebuah project, serta dependensi yang mungkin dimiliki oleh sebuah tugas. Diagram Google Gantt dirender di browser menggunakan SVG. Seperti semua diagram Google, diagram Gantt menampilkan tooltip saat pengguna mengarahkan kursor ke data.

Catatan: Gantt Chart tidak akan berfungsi di Internet Explorer versi lama. (IE8 dan versi sebelumnya tidak mendukung SVG, yang diperlukan Gantt Chart.)

Contoh sederhana

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

Tidak ada dependensi

Untuk membuat diagram Gantt yang tidak memiliki dependensi, pastikan nilai terakhir untuk setiap baris dalam DataTable ditetapkan ke 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>

Mengelompokkan resource

Tugas yang serupa dapat dikelompokkan bersama menggunakan resource. Tambahkan kolom jenis string ke data Anda (setelah kolom Task ID dan Task Name), dan pastikan setiap tugas yang harus dikelompokkan ke dalam resource memiliki ID resource yang sama. Resource akan dikelompokkan menurut warna. 

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

Menghitung awal/akhir/durasi

Diagram Gantt menerima tiga nilai yang berkaitan dengan durasi tugas: tanggal mulai, tanggal akhir, dan durasi (dalam milidetik). Jika, misalnya, tidak ada tanggal mulai, diagram dapat menghitung waktu yang hilang berdasarkan tanggal akhir dan durasi. Hal yang sama berlaku untuk menghitung tanggal akhir. Jika tanggal mulai dan akhir diberikan, durasi dapat dihitung di antara keduanya.

Lihat tabel di bawah untuk daftar cara Gantt menangani kehadiran awal, akhir, dan durasi dalam situasi yang berbeda.

Mulai Akhiri Durasi Hasil
Presentasikan Presentasikan Presentasikan Pastikan durasi konsisten dengan waktu mulai/akhir. Menampilkan error jika tidak konsisten.
Presentasikan Presentasikan Null Menghitung durasi dari waktu mulai dan berakhir.
Presentasikan Null Presentasikan Menghitung waktu berakhir.
Presentasikan Null Null Menampilkan error sebagai tidak dapat menghitung durasi atau waktu berakhir.
Null Presentasikan Presentasikan Waktu mulai komputasi.
Null Null Presentasikan Menghitung waktu mulai berdasarkan dependensi. Bersama defaultStartDate, memungkinkan diagram digambar hanya dengan durasi.
Null Presentasikan Null Menampilkan error karena tidak dapat menghitung waktu atau durasi mulai.
Null Null Null Menampilkan error sebagai tidak dapat menghitung waktu mulai, waktu berakhir, atau durasi.

Dengan memperhatikan hal di atas, Anda dapat membuat diagram yang meletakkan perjalanan biasa untuk bekerja hanya menggunakan durasi setiap tugas. 

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

Jalur penting

Jalur penting dalam diagram Gantt adalah jalur, atau jalur, yang secara langsung memengaruhi tanggal akhir. Jalur penting dalam diagram Google Gantt secara default berwarna merah, dan dapat disesuaikan menggunakan opsi criticalPathStyle. Anda juga dapat menonaktifkan jalur penting dengan menetapkan criticalPathEnabled ke false. 

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

Menata gaya panah

Anda dapat menata gaya panah dependensi di antara tugas dengan opsi 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
            }
          }
        };

Menata gaya trek

Gaya visual petak ditangani oleh kombinasi innerGridHorizLine, innerGridTrack, dan innerGridDarkTrack. Dengan hanya menetapkan innerGridTrack, diagram akan menghitung warna yang lebih gelap untuk innerGridDarkTrack, tetapi dengan menetapkan innerGridDarkTrack saja, innerGridTrack akan menggunakan warna default dan tidak akan menghitung warna yang lebih terang. 

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

Memuat

Nama paket google.charts.load adalah "gantt". 

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

Nama class visualisasinya adalah google.visualization.Gantt.

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

Format data

Baris: Setiap baris dalam tabel mewakili tugas.

Kolom:

  Kolom 0 Kolom 1 Kolom 2 Kolom 3 Kolom 4 Kolom 5 Kolom 6 Kolom 7
Tujuan: ID Tugas Nama Tugas ID Resource (opsional) Mulai Akhiri Durasi (dalam milidetik) Persentase Selesai Dependensi
Jenis Data: string string string date date angka angka string
Peran: domain data data data data data data data

 

Opsi konfigurasi

Name Jenis Default Deskripsi
backgroundColor.fill string 'putih' Warna pengisi diagram, sebagai string warna HTML.
Gantt.arrow Objek null Untuk Gantt Chart, gantt.arrow mengontrol berbagai properti panah yang menghubungkan tugas.
gantt.arrow.angle angka 45 Sudut kepala panah.
gantt.arrow.color string '#000' Warna panah.
gantt.arrow.length angka 8 Panjang kepala panah.
gantt.arrow.radius angka 15 Radius untuk menentukan kurva panah di antara dua tugas.
gantt.arrow.spaceSetelah angka 4 Jumlah spasi kosong antara kepala panah dan tugas yang ditunjuknya.
gantt.arrow.width angka 1,4 Lebar panah.
gantt.barCornerRadius angka 2 Radius untuk menentukan kurva sudut sebuah batang.
gantt.barHeight angka null Tinggi batang untuk tugas.
gantt.importantPathEnabled boolean benar Jika true, tanda panah di jalur penting akan diberi gaya secara berbeda.
gantt.importantPathStyle Objek null Objek yang berisi gaya untuk setiap panah jalur penting.
gantt.importantPathStyle.stroke string null Warna panah jalur penting.
gantt.importantPathStyle.strokeWidth angka 1,4 Ketebalan panah jalur penting.
gantt.defaultStartDate tanggal/angka null Jika tanggal mulai tidak dapat dihitung dari nilai dalam DataTable, tanggal mulai akan ditetapkan ke nilai ini. Menerima nilai date (new Date(YYYY, M, D)) atau angka, yang merupakan jumlah milidetik untuk digunakan.
gantt.innerGridHorizLine Objek null Menentukan gaya garis petak horizontal dalam.
gantt.innerGridHorizLine.stroke string null Warna garis kisi horizontal dalam.
gantt.innerGridHorizLine.strokeWidth angka 1 Lebar garis kisi horizontal dalam.
gantt.innerGridTrack.fill string null Warna pengisi jalur petak bagian dalam. Jika innerGridDarkTrack.fill tidak ditentukan, ini akan diterapkan ke setiap trek petak.
gantt.innerGridDarkTrack.fill string null Warna pengisi trek petak bagian dalam yang gelap dan alternatif.
gantt.labelMaxWidth angka 300 Jumlah ruang maksimum yang diizinkan untuk setiap label tugas.
gantt.labelStyle Objek null

Objek yang berisi gaya untuk label tugas.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean benar Mengisi taskbar berdasarkan persentase penyelesaian tugas.
gantt.percentStyle.fill string null Warna persentase bagian tugas yang diselesaikan.
gantt.shadowEnabled boolean benar Jika ditetapkan ke true, gambar bayangan di bawah setiap taskbar dengan dependensi.
gantt.shadowColor string '#000' Menentukan warna bayangan pada task bar yang memiliki dependensi.
gantt.shadowOffset angka 1 Menentukan offset, dalam piksel, bayangan pada task bar yang memiliki dependensi.
gantt.sortTasks boolean benar Menentukan bahwa tugas harus diurutkan secara topologi, jika benar; jika tidak, menggunakan urutan yang sama dengan baris DataTable yang sesuai.
gantt.trackHeight angka null Tinggi trek.
lebar angka lebar elemen yang memuatnya Lebar diagram, dalam piksel.
tinggi angka tinggi elemen yang memuatnya tinggi diagram, dalam piksel.

Metode

Metode Deskripsi
draw(data, options)

Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa ready diaktifkan. Extended description

Jenis Hasil: tidak ada
getSelection()

Menampilkan array entitas diagram yang dipilih. Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori. Untuk diagram ini, hanya satu entitas yang dapat dipilih pada waktu tertentu. Extended description

Jenis Hasil: Array elemen pilihan
setSelection()

Memilih entitas diagram yang ditentukan. Membatalkan pilihan sebelumnya. Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori. Untuk diagram ini, hanya satu entitas yang dapat dipilih sekaligus. Extended description

Jenis Hasil: tidak ada
clearChart()

Menghapus diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Hasil: tidak ada

Acara

Peristiwa Deskripsi
click

Diaktifkan saat pengguna mengklik di dalam diagram. Dapat digunakan untuk mengidentifikasi kapan judul, elemen data, entri legenda, sumbu, garis petak, atau label diklik.

Properti: targetID
error

Dipicu jika terjadi error saat mencoba merender diagram.

Properties: ID, pesan
ready

Diagram siap untuk panggilan metode eksternal. Jika ingin berinteraksi dengan diagram dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode draw, dan memanggilnya hanya setelah peristiwa diaktifkan.

Properti: tidak ada
select

Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil getSelection().

Properti: tidak ada

Kebijakan data

Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.