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 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.
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.
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 Properti: tidak ada
|
select |
Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil Properti: tidak ada
|
Kebijakan data
Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.