Ringkasan
Linimasa adalah diagram yang menggambarkan cara penggunaan serangkaian resource dari waktu ke waktu. Jika Anda mengelola project software dan ingin mengilustrasikan siapa yang melakukan apa dan kapan, atau jika Anda mengadakan konferensi dan perlu menjadwalkan ruang rapat, linimasa sering kali merupakan pilihan visualisasi yang wajar. Salah satu jenis linimasa yang populer adalah diagram Gantt.
Catatan: Pada objek Tanggal JavaScript, bulan diindeks mulai dari nol dan naik hingga sebelas, dengan Januari menjadi bulan 0 dan Desember menjadi bulan 11. Jika linimasa Anda sepertinya sebulan, ini kemungkinan besar alasannya. Untuk informasi selengkapnya, lihat halaman Tanggal dan Waktu.
Contoh sederhana
Misalnya, Anda ingin merencanakan kapan presiden Amerika menjalankan persyaratannya. Di sini, "resource" adalah presiden, dan kita dapat memetakan setiap persyaratan presiden sebagai batang:
Mengarahkan kursor ke panel akan menampilkan tooltip dengan informasi yang lebih mendetail.
Setelah memuat paket timeline dan menentukan
callback untuk menggambar diagram saat halaman dirender,
metode drawChart() akan membuat instance
google.visualization.Timeline(), lalu mengisi
dataTable dengan satu baris untuk setiap presiden.
Di dalam dataTable, kolom pertama adalah
nama presiden, dan kolom kedua serta ketiga adalah waktu mulai dan
akhir. Keduanya memiliki jenis Date JavaScript, tetapi juga
dapat berupa angka biasa.
Terakhir, kita memanggil metode draw() diagram,
yang menampilkannya di dalam div dengan ID yang sama
(timeline) yang digunakan saat container dideklarasikan
di baris pertama drawChart().
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>
Linimasa Google Chart dapat disesuaikan dan dalam contoh berikut kami akan menunjukkan beberapa cara umum untuk menyesuaikan tampilan linimasa Anda.
Memberi label batang
Selain label baris ("Washington", "Adams", "Jefferson", di atas), Anda dapat memberi label pada batang individual. Di sini, kami mengubah label baris menjadi angka sederhana dan menempatkan setiap nama presiden di kolomnya.
Dalam kode ini, kami telah menyisipkan kolom baru ke dalam data untuk menyimpan
label batang: nama lengkap setiap presiden. Jika ada empat kolom dalam linimasa dataTable, yang pertama ditafsirkan sebagai label baris, yang kedua sebagai label batang, dan yang ketiga serta keempat sebagai awal dan akhir.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
<div id="example2.1" style="height: 200px;"></div>
Label baris baru di atas tidak terlalu informatif, jadi mari kita hapus label tersebut dengan opsi linimasa showRowLabels.
Secara default, showRowLabels adalah true. Menyetelnya ke false akan menghapus label
baris:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
timeline: { showRowLabels: false }
};
chart.draw(dataTable, options);
}
</script>
<div id="example2.2" style="height: 180px;"></div>
Contoh lanjutan
Untuk membuat linimasa lebih kompleks, mari kita tambahkan wakil presiden dan sekretaris negara ke diagram kami. John Adams adalah wakil presiden sebelum ia menjadi presiden, dan Thomas Jefferson merupakan sekretaris negara bagian, lalu wakil presiden, dan terakhir sebagai presiden.
Dalam linimasa, resource akan memiliki warna yang sama meskipun muncul di beberapa baris, sehingga pada diagram berikut setiap orang direpresentasikan dengan warna yang konsisten.
Beberapa sekretaris negara bagian ditayangkan dalam waktu yang sangat singkat, sehingga diagram ini merupakan pengujian pelabelan yang baik. Jika label terlalu besar untuk batang, label akan disingkat atau dihilangkan, bergantung pada ukuran batangnya. Pengguna selalu dapat mengarahkan kursor ke kolom untuk mendapatkan informasi tooltip.
Linimasa akan menata letak baris secara berurutan—presiden atas wakil presiden di atas sekretaris negara—karena itu adalah urutan kemunculannya dalam kode di bawah ini. Namun, tata letak batang
hanya ditentukan oleh waktu mulai dan berakhir, sehingga menukar
dua sekretaris negara bagian atau dua presiden di
dataTable tidak berpengaruh pada diagram.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
[ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
[ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
[ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
[ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
[ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
[ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
[ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
[ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
[ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
[ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
[ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
]);
chart.draw(dataTable);
}
</script>
<div id="example3.1" style="height: 200px;"></div>
Menempatkan batang di satu baris
Tidak seperti
paus, hanya boleh ada satu presiden AS dalam satu waktu, jadi jika kita
melabeli semua baris sebagai "Presiden", linimasa akan menggabungkan
tiga baris diagram pertama kita menjadi satu baris untuk presentasi
yang lebih bersih. Anda dapat mengontrol perilaku ini dengan opsi groupByRowLabel.
Berikut adalah perilaku default:
Sekarang, mari kita tetapkan groupByRowLabel ke false dan
bagi satu baris menjadi tiga:
Kode untuk menonaktifkan pengelompokan:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
timeline: { groupByRowLabel: false }
};
chart.draw(dataTable, options);
}
</script>
<div id="example4.2" style="height: 200px;"></div>
Mengontrol warna
Secara default, Google Chart memilih warna yang dioptimalkan untuk estetika dan keterbacaan (termasuk pengguna dengan gangguan penglihatan). Anda dapat menyesuaikan perilaku default dengan opsi colorByRowLabel, singleColor, backgroundColor, dan colors.
Opsi colorByRowLabel mewarnai semua batang pada baris yang sama. Ini bisa menjadi pilihan yang baik saat ada kesenjangan di antara batang-batang Anda.
colorByRowLabel ditetapkan secara default ke false, sehingga
di sini kita akan menggantinya dan menetapkannya ke true.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Beginning JavaScript', new Date(0,0,0,12,0,0), new Date(0,0,0,13,30,0) ],
[ 'Magnolia Room', 'Intermediate JavaScript', new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,0,0), new Date(0,0,0,17,30,0) ],
[ 'Willow Room', 'Beginning Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Willow Room', 'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Willow Room', 'Advanced Google Charts', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);
var options = {
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.1" style="height: 100px;"></div>
Jika Anda ingin semua batang berwarna sama, apa pun baris yang berada di atasnya, gunakan
opsi singleColor:
Pada kode di bawah ini, singleColor ditetapkan ke nilai heksadesimal
untuk mewarnai semua batang menjadi hijau muda:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { singleColor: '#8d8' },
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.2" style="height: 150px;"></div>
Anda dapat mengontrol warna latar belakang baris
dengan opsi backgroundColor:
backgroundColor ditetapkan sebagai nilai heksadesimal. Di sini,
kami menyambungkannya dengan colorByRowLabel untuk menampilkan trek dalam
konferensi:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.3');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { colorByRowLabel: true },
backgroundColor: '#ffd'
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.3" style="height: 150px;"></div>
Lalu, untuk menetapkan warna latar belakang ke alternatif atau tanpa perubahan oleh indeks baris,
gunakan opsi alternatingRowStyle (aktif v51+):
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.4');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { colorByRowLabel: true },
alternatingRowStyle: false
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.4" style="height: 150px;"></div>
Jika Anda ingin mengontrol warna batang individual, gunakan opsi colors:
colors menggunakan array nilai heksadesimal, yang diterapkan
ke batang secara berurutan:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.5');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e'],
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.5" style="height: 150px;"></div>
Jika diagram memerlukan lebih banyak warna daripada yang tercantum, diagram akan berperilaku seolah-olah singleColor ditetapkan ke warna pertama dalam daftar. (Hal ini berlaku untuk semua Google Chart, bukan hanya linimasa.)
Cara lain untuk mengontrol warna batang individual adalah dengan menggunakan kolom dengan peran gaya.
Kode untuk menambahkan dan mengisi kolom gaya:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.6');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
[ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
<div id="example5.6" style="height: 150px;"></div>
Mengubah font
Anda dapat memilih jenis huruf dan font untuk label setiap baris dengan rowLabelStyle, dan untuk label pada setiap batang dengan barLabelStyle. Keduanya ditunjukkan di bawah.
Catatan: Pastikan untuk memilih jenis huruf yang dapat dirender oleh browser pengguna Anda.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example6.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e'],
timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
};
chart.draw(dataTable, options);
}
</script>
<div id="example6.1" style="height: 200px;"></div>
Anda tidak dapat menetapkan warna teks barLabel.
Garis petak yang tumpang-tindih
Google Chart membuat sedikit penyesuaian pada endpoint batang untuk
menghindari garis kisi linimasa. Untuk mencegah perilaku ini, tetapkan
opsi avoidOverlappingGridLines
ke false.
Untuk menggambarkan efeknya, berikut adalah dua contoh, yang pertama dengan garis petak yang tumpang tindih dan yang kedua tanpa.
Berikut adalah kode yang tumpang-tindih dengan garis kisi:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example7.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
[ 'Magnolia Room', 'App Engine', new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);
var options = {
timeline: { showRowLabels: false },
avoidOverlappingGridLines: false
};
chart.draw(dataTable, options);
}
</script>
<div id="example7.1" style="height: 200px;"></div>
Menyesuaikan tooltip
Anda dapat menyesuaikan hal yang dilihat pengguna saat mengarahkan kursor ke batang linimasa dengan menambahkan kolom tooltip ke tabel data lima kolom. Untuk memberikan tooltip non-default, setiap baris tabel data Anda harus memiliki lima kolom (label baris, label batang, tooltip, awal, dan akhir):
Mengarahkan kursor ke panel akan menampilkan tooltip dengan teks yang ditentukan di kolom ketiga. Pada diagram ini, kita harus menetapkan kolom kedua ke
nilai contoh (di sini, null) sehingga tooltip dapat ada
di kolom ketiga.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline-tooltip');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
dataTable.addColumn({ type: 'string', role: 'tooltip' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
[ 'Adams', null, 'John', new Date(1797, 2, 3), new Date(1801, 2, 3) ],
[ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline-tooltip" style="height: 180px;"></div>
</body>
</html>
Memuat
Nama paket google.charts.load adalah timeline:
google.charts.load("current", {packages: ["timeline"]});
Nama class visualisasinya adalah google.visualization.Timeline:
var visualization = new google.visualization.Timeline(container);
Format data
Baris: Setiap baris dalam tabel mewakili panel linimasa.
Kolom:
| Kolom 0 | Kolom 1 | Kolom 2 | Kolom 3 | Kolom 4 | |
|---|---|---|---|---|---|
| Tujuan: | Label baris | Label batang (opsional) | Tooltip (opsional) | Mulai | Akhiri |
| Jenis Data: | string | string | string | angka atau tanggal | angka atau tanggal |
| Peran: | data | data | tooltip | data | data |
Opsi konfigurasi
| Name | |
|---|---|
| gayaBarisBerganti |
Apakah diagram harus mengubah warna latar belakang dengan indeks baris (yaitu, warna latar belakang warna baris yang diindeks dengan warna yang lebih gelap). Jika salah, latar belakang diagram akan menjadi satu warna seragam. Jika benar (true), latar belakang diagram akan bergantian sesuai oleh indeks baris. (Catatan: aktif v51+) Jenis: boolean
Default: true (benar):
|
| hindariTumpangtindihGridLines |
Apakah elemen tampilan (misalnya, batang dalam linimasa) harus mengaburkan garis kisi. Jika salah, garis petak dapat sepenuhnya tertutup oleh elemen tampilan. Jika true (benar), elemen tampilan dapat diubah agar garis petak tetap terlihat. Jenis: boolean
Default: true (benar):
|
| backgroundColor |
Warna latar belakang untuk area utama diagram. Dapat berupa string warna HTML sederhana, misalnya: Jenis: string atau objek
Default: 'putih'
|
| warna |
Warna yang akan digunakan untuk elemen diagram. Array string, dengan setiap elemen adalah string warna HTML, misalnya: Jenis: Array string
Default: warna default
|
| aktifkanInteraktivitas |
Apakah diagram menampilkan peristiwa berbasis pengguna atau bereaksi terhadap interaksi pengguna. Jika salah, diagram tidak akan menampilkan peristiwa 'pilih' atau peristiwa berbasis interaksi lainnya (tetapi akan menampilkan peristiwa siap atau error), dan tidak akan menampilkan pengarahan teks atau mengubah bergantung pada input pengguna. Jenis: boolean
Default: true (benar):
|
| NamaFont |
Tampilan font default untuk semua teks dalam diagram. Anda dapat menggantinya menggunakan properti untuk elemen diagram tertentu. Jenis: string
Default: 'chromebook'
|
| ukuranFont |
Ukuran font default, dalam piksel, dari semua teks dalam diagram. Anda dapat menggantinya menggunakan properti untuk elemen diagram tertentu. Jenis: angka
Default: otomatis
|
| forceIFrame |
Menggambar diagram di dalam frame inline. (Perhatikan bahwa di IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.) Jenis: boolean
Default: false (salah)
|
| tinggi |
Tinggi diagram, dalam piksel. Jenis: angka
Default: tinggi elemen penampung
|
| linimasa.barLabelStyle |
Objek yang menentukan gaya teks label batang. Formatnya: {fontName: <string>, fontSize: <string>}
Lihat juga Objek Type:
Default: null
|
| timeline.colorByRowLabel |
Jika disetel ke benar (true), warna setiap batang di baris akan sama. Defaultnya adalah menggunakan satu warna per label batang. Jenis: boolean
Default: false (salah)
|
| linimasa.groupByRowLabel |
Jika disetel ke salah (false), satu baris akan dibuat untuk setiap entri Jenis: boolean
Default: true (benar):
|
| linimasa.rowLabelStyle |
Objek yang menentukan gaya teks label baris. Formatnya: {color: <string>, fontName: <string>, fontSize: <string>}
Objek Type:
Default: null
|
| timeline.showBarLabels |
Jika ditetapkan ke false, label label tidak akan disertakan. Defaultnya adalah menampilkannya. Jenis: boolean
Default: true (benar):
|
| linimasa.showRowLabels |
Jika ditetapkan ke false, label baris tidak akan disertakan. Defaultnya adalah menampilkannya. Jenis: boolean
Default: true (benar):
|
| linimasa.singleWarna |
Mewarnai semua batang dengan cara yang sama. Ditentukan sebagai nilai heksadesimal (misalnya, '#8d8'). Jenis: string
Default: null
|
| tooltip.isHtml |
Setel ke Catatan: penyesuaian konten tooltip HTML melalui peran data kolom tooltip tidak didukung oleh visualisasi Diagram Balon. Jenis: boolean
Default: true (benar):
|
| tooltip.pemicu |
Interaksi pengguna yang menyebabkan tooltip ditampilkan:
Jenis: string
Default: 'fokus'
|
| lebar |
Lebar diagram, dalam piksel. Jenis: angka
Default: lebar elemen yang memuatnya
|
Metode
| Metode | |
|---|---|
draw(data, options) |
Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa Jenis Hasil: tidak ada
|
clearChart() |
Menghapus diagram, dan melepaskan semua resource yang dialokasikan. 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
|
Acara
| Name | |
|---|---|
error |
Dipicu jika terjadi error saat mencoba merender diagram. Properties: ID, pesan
|
onmouseover |
Diaktifkan saat pengguna mengarahkan mouse ke entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Batang berkorelasi dengan sel dalam tabel data, entri legenda ke kolom (indeks baris bernilai null), dan kategori ke baris (indeks kolom bernilai null). Properti: baris, kolom
|
onmouseout |
Diaktifkan saat pengguna mouse menjauh dari entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Batang berkorelasi dengan sel dalam tabel data, entri legenda ke kolom (indeks baris bernilai null), dan kategori ke baris (indeks kolom bernilai null). Properti: baris, kolom
|
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.