Diagram Gantt

Ringkasan

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

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

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 mirip dapat dikelompokkan bersama menggunakan resource. Tambahkan kolom jenis string ke data Anda (setelah kolom Task ID dan Task Name), dan pastikan tugas apa pun yang harus dikelompokkan ke dalam resource memiliki ID resource yang sama. Materi 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>

Awal/akhir/durasi komputasi

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

Lihat tabel di bawah ini untuk daftar cara Gantt menangani keberadaan awal, akhir, dan durasi dalam keadaan yang berbeda.

Mulai Akhiri Durasi Hasil
Presentasikan Presentasikan Presentasikan Pastikan durasi tersebut konsisten dengan waktu mulai/berakhir. 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 karena tidak dapat menghitung durasi atau waktu berakhir.
Null Presentasikan Presentasikan Menghitung waktu mulai.
Null Null Presentasikan Menghitung waktu mulai berdasarkan dependensi. Bersama dengan defaultStartDate, memungkinkan diagram digambar hanya dengan menggunakan durasi.
Null Presentasikan Null Menampilkan error karena tidak dapat menghitung waktu mulai atau durasi.
Null Null Null Menampilkan error karena tidak dapat menghitung waktu mulai, waktu berakhir, atau durasi.

Dengan mempertimbangkan hal di atas, Anda dapat membuat diagram yang menampilkan perjalanan biasa ke kantor dengan 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 kritis

Jalur kritis dalam diagram Gantt adalah jalur, atau jalur, yang secara langsung memengaruhi tanggal akhir. Jalur kritis dalam diagram Gantt Google berwarna merah secara default, 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 menetapkan innerGridTrack saja, diagram akan menghitung warna yang lebih gelap untuk innerGridDarkTrack, tetapi dengan menetapkan innerGridDarkTrack saja, innerGridTrack akan menggunakan warna defaultnya 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 visualisasi 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) Persen Selesai Dependensi
Jenis Data: string string string date date number number 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 Charts, gantt.arrow mengontrol berbagai properti panah yang menghubungkan tugas.
gantt.arrow.angle number 45 Sudut kepala panah.
gantt.arrow.color string '#000' Warna panah.
gantt.arrow.length number 8 Panjang kepala panah.
gantt.arrow.radius number 15 Radius untuk menentukan kurva panah di antara dua tugas.
gantt.arrow.spaceAfter number 4 Jumlah spasi kosong antara kepala panah dan tugas yang ditunjuk.
gantt.arrow.width number 1,4 Lebar panah.
gantt.barCornerRadius number 2 Radius untuk menentukan kurva sudut batang.
gantt.barHeight number null Ketinggian batang untuk tugas.
gantt.criticalPathEnabled boolean true Jika true panah pada jalur kritis akan diberi gaya dengan cara yang berbeda.
gantt.criticalPathStyle objek null Objek yang berisi gaya untuk setiap panah jalur kritis.
gantt.criticalPathStyle.stroke string null Warna panah jalur kritis.
gantt.criticalPathStyle.strokeWidth number 1,4 Ketebalan panah jalur kritis.
gantt.defaultStartDate tanggal/nomor null Jika tanggal mulai tidak dapat dihitung dari nilai dalam DataTable, tanggal mulai akan ditetapkan ke tanggal ini. Menerima nilai date (new Date(YYYY, M, D)) atau angka, yang merupakan jumlah milidetik untuk digunakan.
gantt.innerGridHorizLine objek null Mendefinisikan gaya garis petak horizontal bagian dalam.
gantt.innerGridHorizLine.stroke string null Warna garis petak horizontal bagian dalam.
gantt.innerGridHorizLine.strokeWidth number 1 Lebar garis petak horizontal bagian dalam.
gantt.innerGridTrack.fill string null Warna isian jalur kisi bagian dalam. Jika tidak ada innerGridDarkTrack.fill yang ditentukan, maka akan diterapkan ke setiap jalur petak.
gantt.innerGridDarkTrack.fill string null Warna isian trek petak dalam yang berbeda dan gelap.
gantt.labelMaxWidth number 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 true Mengisi taskbar berdasarkan persentase yang diselesaikan untuk tugas tersebut.
gantt.percentStyle.fill string null Warna bagian persentase yang selesai pada taskbar.
gantt.shadowEnabled boolean true Jika disetel ke true, gambar bayangan di bawah setiap taskbar yang memiliki dependensi.
gantt.shadowColor string '#000' Mendefinisikan warna bayangan di bawah bilah tugas yang memiliki dependensi.
gantt.shadowOffset number 1 Mendefinisikan offset, dalam piksel, bayangan di bawah taskbar yang memiliki dependensi.
gantt.sortTasks boolean true Menentukan bahwa tugas harus diurutkan secara topologis, jika benar; jika tidak, gunakan urutan yang sama dengan baris DataTable yang sesuai.
gantt.trackHeight number null Tinggi trek.
lebar number lebar elemen yang memuatnya Lebar diagram, dalam piksel.
tinggi number tinggi elemen yang memuatnya tinggi bagan, dalam {i>pixel<i}.

Metode

Metode Deskripsi
draw(data, options)

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

Jenis Pengembalian: 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 Pengembalian: 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 pada satu waktu. Extended description

Jenis Pengembalian: tidak ada
clearChart()

Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Pengembalian: tidak ada

Acara

Acara 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

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