Ringkasan
Linimasa adalah diagram yang menunjukkan penggunaan sejumlah resource dari waktu ke waktu. Jika Anda mengelola project software dan ingin mengilustrasikan siapa yang melakukan apa dan kapan, atau jika Anda menyelenggarakan konferensi dan perlu menjadwalkan ruang rapat, linimasa sering kali merupakan pilihan visualisasi yang wajar. Salah satu jenis {i>timeline<i} yang populer adalah Gantt chart.
Catatan: Dalam objek Tanggal JavaScript, bulan diindeks mulai dari nol dan naik hingga sebelas, dengan Januari adalah bulan 0 dan Desember adalah bulan 11. Jika linimasa Anda sepertinya meleset dalam sebulan, kemungkinan besar ini alasannya. Untuk mengetahui informasi selengkapnya, lihat halaman Tanggal dan Waktu.
Contoh sederhana
Katakanlah Anda ingin merencanakan kapan presiden Amerika melaksanakan masa jabatannya. Di sini, "sumber daya" adalah presiden, dan kita dapat merencanakan setiap istilah presiden sebagai batang:
Mengarahkan kursor ke batang akan menampilkan tooltip yang berisi 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, sedangkan kolom kedua dan ketiga adalah waktu mulai dan
waktu berakhir. Ini 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 setiap batang. Di sini, kita mengubah label baris menjadi angka sederhana dan menempatkan nama setiap presiden di barnya.
Dalam kode ini, kita telah menyisipkan kolom baru ke dalam data untuk menyimpan
label batang: nama lengkap setiap presiden. Jika ada empat
kolom dalam dataTable linimasa, yang pertama akan 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 hapus
label tersebut dengan opsi showRowLabels linimasa.
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 {i>timeline<i} yang lebih kompleks, tambahkan wakil presiden dan menteri negara bagian ke dalam bagan. John Adams adalah wakil presiden sebelum ia menjadi presiden, dan Thomas Jefferson menjadi sekretaris negara, lalu wakil presiden, dan terakhir presiden.
Dalam linimasa, resource akan memiliki warna yang sama bahkan saat muncul di beberapa baris, sehingga dalam diagram berikut, setiap orang diwakili dengan warna yang konsisten.
Beberapa sekretaris negara bagian dalam waktu yang sangat singkat, sehingga diagram ini merupakan uji coba pelabelan yang baik. Jika terlalu besar untuk batang, label akan disingkat atau dihapus, tergantung ukuran batangnya. Pengguna selalu dapat mengarahkan kursor ke panel untuk mendapatkan informasi tooltip.
Linimasa akan menyusun baris secara berurutan—presiden di atas
wakil presiden di atas sekretaris negara—karena
begitulah urutannya pada kode di bawah ini. Namun, tata letak batang ditentukan hanya oleh waktu mulai dan berakhir, sehingga penukaran dua sekretaris negara bagian atau dua presiden di dataTable tidak akan 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 pada satu baris
Tidak seperti
Paus, hanya ada satu presiden AS dalam satu waktu. Jadi, jika kita
melabeli semua baris sebagai "President", linimasa akan menggabungkan
tiga baris diagram pertama menjadi satu baris untuk presentasi
yang lebih rapi. Anda dapat mengontrol perilaku ini dengan opsi groupByRowLabel.
Berikut adalah perilaku default-nya:
Sekarang, mari 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 visual). Anda dapat
menyesuaikan perilaku default dengan opsi colorByRowLabel,
singleColor, backgroundColor,
dan colors.
Opsi colorByRowLabel memberikan warna yang sama pada semua batang di baris yang sama. Ini bisa menjadi pilihan yang baik jika ada jarak antara
bar Anda.
colorByRowLabel ditetapkan secara default ke false, jadi
di sini kita mengganti dan menyetelnya 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 memiliki warna yang sama, apa pun barisnya, gunakan
opsi singleColor:
Pada kode di bawah, singleColor ditetapkan ke nilai heksadesimal
untuk mewarnai semua batang dengan 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 memasangkannya dengan colorByRowLabel untuk menampilkan trek di
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>
Kemudian, untuk menyetel warna latar belakang ke alternatif atau tidak bergantian menurut 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 setiap batang, gunakan
opsi colors:
colors mengambil 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 Anda memerlukan lebih banyak warna dari yang tercantum, diagram akan berperilaku seolah-olah singleColor ditetapkan ke warna pertama dalam daftar. (Hal ini berlaku untuk semua Google Chart, bukan hanya garis waktu.)
Cara lain untuk mengontrol warna setiap batang 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 typeface dan font untuk label setiap baris
dengan rowLabelStyle, dan untuk label pada setiap batang
dengan barLabelStyle. Keduanya ditunjukkan di bawah ini.
Catatan: Pastikan untuk memilih typeface yang dapat dirender oleh browser pengguna.
<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 menyetel warna teks barLabel.
Garis petak yang tumpang-tindih
Google Chart membuat sedikit penyesuaian pada endpoint batang untuk menghindari
mengaburkan garis petak linimasa. Untuk mencegah perilaku ini, tetapkan opsi avoidOverlappingGridLines ke false.
Untuk menggambarkan efeknya, berikut dua contoh, contoh pertama dengan garis petak yang tumpang-tindih dan yang kedua tanpa garis petak.
Berikut adalah kode yang tumpang-tindih dengan garis petak:
<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 apa yang dilihat pengguna saat mereka mengarahkan kursor ke batang linimasa dengan menambahkan kolom tooltip ke dalam tabel data lima kolom. Untuk memberikan tooltip non-default, setiap baris tabel data Anda harus memiliki kelima kolom (label baris, label batang, tooltip, awal, dan akhir):
Mengarahkan kursor ke batang akan menampilkan tooltip dengan teks yang ditentukan di
kolom ketiga. Dalam diagram ini, kita harus menetapkan kolom kedua ke nilai tiruan (di sini, null) sehingga tooltip bisa 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 visualisasi 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 | nomor atau tanggal | nomor atau tanggal |
| Peran: | data | data | tooltip | data | data |
Opsi konfigurasi
| Name | |
|---|---|
| alternatingRowStyle |
Apakah diagram harus berganti warna latar belakang dengan indeks baris (yaitu, memberi tint warna latar belakang baris yang diindeks secara merata menjadi rona gelap). Jika salah, latar belakang diagram akan menggunakan satu warna seragam. Jika true, latar belakang diagram akan berganti tint berdasarkan indeks baris. (Catatan: v51+ aktif) Jenis: boolean
Default: benar (true)
|
| avoidOverlappingGridLines |
Apakah elemen tampilan (misalnya, batang di linimasa) harus menutupi garis petak. Jika salah, garis petak dapat tertutup sepenuhnya oleh elemen tampilan. Jika true (benar), elemen tampilan dapat diubah agar garis petak tetap terlihat. Jenis: boolean
Default: benar (true)
|
| 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 elemennya adalah string warna HTML, misalnya: Jenis: Array string
Default: warna default
|
| enableInteractivity |
Apakah diagram menampilkan peristiwa berbasis pengguna atau bereaksi terhadap interaksi pengguna. Jika salah, diagram tidak akan menampilkan peristiwa 'select' atau peristiwa berbasis interaksi lainnya (tetapi akan menampilkan peristiwa siap atau error), dan tidak akan menampilkan teks informasi atau berubah, bergantung pada input pengguna. Jenis: boolean
Default: benar (true)
|
| fontName |
Tampilan font default untuk semua teks dalam diagram. Anda dapat menggantinya menggunakan properti untuk elemen diagram tertentu. Jenis: string
Default: 'XXXXXXXX'
|
| fontSize |
Ukuran font default, dalam piksel, untuk semua teks dalam diagram. Anda dapat menggantinya menggunakan properti untuk elemen diagram tertentu. Jenis: nomor
Default: otomatis
|
| forceIFrame |
Menggambar diagram di dalam bingkai inline. (Perhatikan bahwa pada IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.) Jenis: boolean
Default: false
|
| tinggi |
Tinggi diagram, dalam piksel. Jenis: nomor
Default: tinggi elemen yang memuatnya
|
| timeline.barLabelStyle |
Objek yang menetapkan gaya teks label batang. Formatnya adalah sebagai berikut: {fontName: <string>, fontSize: <string>}
Lihat juga Jenis: objek
Default: null
|
| timeline.colorByRowLabel |
Jika ditetapkan ke true, warna setiap batang pada baris akan sama. Setelan defaultnya adalah menggunakan satu warna per label batang. Jenis: boolean
Default: false
|
| timeline.groupByRowLabel |
Jika disetel ke salah (false), buat satu baris untuk setiap entri Jenis: boolean
Default: benar (true)
|
| timeline.rowLabelStyle |
Objek yang menetapkan gaya teks label baris. Formatnya adalah sebagai berikut: {color: <string>, fontName: <string>, fontSize: <string>}
Jenis: objek
Default: null
|
| timeline.showBarLabels |
Jika ditetapkan ke salah (false), label batang akan dihilangkan. Defaultnya adalah menampilkannya. Jenis: boolean
Default: benar (true)
|
| timeline.showRowLabels |
Jika ditetapkan ke salah (false), label baris akan dihilangkan. Defaultnya adalah menampilkannya. Jenis: boolean
Default: benar (true)
|
| timeline.singleColor |
Warna semua batang sama. Ditentukan sebagai nilai heksadesimal (mis., '#8d8'). Jenis: string
Default: null
|
| tooltip.isHtml |
Setel ke Catatan: penyesuaian konten tooltip HTML melalui peran data kolom tooltip tidak didukung oleh visualisasi Bubble Chart. Jenis: boolean
Default: benar (true)
|
| tooltip.trigger |
Interaksi pengguna yang menyebabkan tooltip ditampilkan:
Jenis: string
Default: 'fokus'
|
| lebar |
Lebar diagram, dalam piksel. Jenis: nomor
Default: lebar elemen yang memuatnya
|
Metode
| Metode | |
|---|---|
draw(data, options) |
Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa Jenis Pengembalian: tidak ada
|
clearChart() |
Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan. 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.
Jenis Pengembalian: Array elemen pilihan
|
Acara
| Name | |
|---|---|
error |
Diaktifkan saat 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 berkaitan dengan sel dalam tabel data, entri legenda ke kolom (indeks baris null), dan kategori dengan baris (indeks kolom null). Properti: baris, kolom
|
onmouseout |
Diaktifkan saat pengguna menjauhi entity visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Batang berkaitan dengan sel dalam tabel data, entri legenda ke kolom (indeks baris null), dan kategori dengan baris (indeks kolom 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.