Genel bakış
Zaman çizelgesi, bir dizi kaynağın zaman içinde nasıl kullanıldığını gösteren bir grafiktir. Bir yazılım projesi yönetiyorsanız ve kimin ne zaman ne yaptığını göstermek istiyorsanız veya bir konferans düzenliyorsanız ve toplantı odaları planlamanız gerekiyorsa zaman çizelgesi genellikle makul bir görselleştirme seçeneğidir. Popüler zaman çizelgelerinden biri de Gantt şemasıdır.
Not: JavaScript Date nesnelerinde, aylar sıfırdan başlamak üzere dizine eklenir ve 11 ay boyunca uzatılır. Ocak 0, ay ise 11'dir. Zaman çizelgeniz bir aylığına kapalı görünüyorsa bunun nedeni büyük olasılıkla budur. Daha fazla bilgi için Tarihler ve Saatler sayfasına bakın.
Basit bir örnek
Amerikalı başkanların şartlarını ne zaman sunduklarını görmek istediğinizi varsayalım. Buradaki "kaynaklar" başkanlardır. Biz de her bir başkanın dönemini çubuk şeklinde gösterebiliriz:
Fareyle bir çubuğun üzerine geldiğinizde daha ayrıntılı bilgiler içeren bir ipucu gösterilir.
timeline paketi yüklendikten sonra sayfa oluşturulurken grafiği çizmek için bir geri çağırma tanımlandıktan sonra drawChart() yöntemi, bir google.visualization.Timeline() örneği oluşturur ve ardından her başkan için bir satır içeren bir dataTable doldurur.
dataTable sütunundaki ilk sütun, başkanın adı, ikinci ve üçüncü sütunlar başlangıç ve bitiş zamanlarıdır. Bunlar Date JavaScript türündedir ancak düz sayılar da olabilir.
Son olarak, grafiğin draw() yöntemini çağırırız. Bu yöntem, drawChart()
öğesinin ilk satırında container belirtildiğinde kullanılan aynı tanımlayıcıya (timeline) sahip
bir div içinde gösterilir.
<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>
Google Grafikleri zaman çizelgeleri özelleştirilebilir. Aşağıdaki örneklerde, zaman çizelgelerinizin görünümünü özelleştirmenin bazı yaygın yolları gösterilmiştir.
Çubukları etiketleme
Satır etiketlerine ("Washington", "Adams", "Jefferson") ek olarak bağımsız çubukları etiketleyebilirsiniz. Burada, satır etiketlerini basit sayılar olarak değiştiriyor ve her bir başkanın adını çubuğa ekliyoruz.
Bu kodda, çubuk etiketleri içerecek şekilde verilerimize yeni bir sütun ekledik: her başkanın tam adı. dataTable zaman çizelgesinde dört sütun varsa ilki satır etiketi, ikincisi bar etiketi, üçüncü ve dördüncüsü başlangıç ve bitiş olarak yorumlanır.
<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>
Yukarıdaki yeni satır etiketlerimiz çok bilgilendirici değildir. Bu nedenle zaman çizelgesi showRowLabels seçeneğiyle bunları kaldıralım.
Varsayılan olarak showRowLabels, true şeklindedir. false olarak ayarlanırsa satır etiketleri kaldırılır:
<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>
Gelişmiş bir örnek
Zaman çizelgemizi daha karmaşık hale getirmek için başkan yardımcılarını ve eyalet sekreterlerini grafiğimize ekleyelim. John Adams başkan yardımcısı olmadan önce, Tomas Jefferson da devlet başkanı ve son olarak başkan yardımcısıydı.
Zaman çizelgelerinde bir kaynak, birden fazla satırda görünse bile aynı renge sahip olur. Dolayısıyla, aşağıdaki grafikte her kullanıcı tutarlı bir renkle gösterilir.
Bazı resmi sekreterler çok kısa bir süre hizmet verdi. Bu nedenle bu grafik, başarılı bir etiketleme testidir. Etiketler, çubuk için çok büyük olduğunda çubuğun boyutuna bağlı olarak kısaltılır veya kaldırılır. Kullanıcılar her zaman araç çubuğunun üzerine gelerek ipucu bilgilerini alabilir.
Zaman çizelgesi, satır öğelerini, başkan yardımcısının tecrübesiyle sıralar halinde yerleştirir. Çünkü bunlar, aşağıdaki kodda sıralanmıştır. Bununla birlikte, çubukların düzeni yalnızca başlangıç ve bitiş saatlerine göre belirlenir. Bu nedenle, dataTable eyaletindeki iki sekreteri veya iki cumhurbaşkanını değiştirmenin grafik üzerinde hiçbir etkisi yoktur.
<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>
Satırları tek bir satıra yerleştirme
Pop-up'ların aksine aynı anda yalnızca bir ABD başkanı olabilir. Bu nedenle, tüm satırlarımızı "Başkan" olarak etiketlediğimizde zaman çizelgesi, daha net bir sunum için ilk grafiğimizin üç satırını bir satırda birleştirir. Bu davranışı groupByRowLabel seçeneğiyle kontrol edebilirsiniz.
Varsayılan davranış şu şekildedir:
Şimdi groupByRowLabel öğesini false olarak ayarlayalım ve bir satırı üçe bölelim:
Gruplandırmayı devre dışı bırakacak kod:
<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>
Renkleri kontrol etme
Google Listeler, varsayılan olarak estetik ve okunabilirlik açısından optimize edilmiş renkleri (görme engelli kullanıcılar da dahil) seçer. Varsayılan davranışı colorByRowLabel, singleColor, backgroundColor ve colors seçenekleriyle uyarlayabilirsiniz.
colorByRowLabel seçeneği, aynı satırdaki tüm çubukların aynısını renklendirir. Çubuklarınız arasında boşluklar olduğunda bu iyi bir seçim olabilir.
colorByRowLabel için varsayılan değer false, burada bunu geçersiz kılıp true olarak ayarlıyoruz.
<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>
Bulundukları satırdan bağımsız olarak tüm çubukların aynı renkte olmasını istiyorsanız singleColor seçeneğini kullanın:
Aşağıdaki kodda, singleColor tüm çubukları açık yeşil olarak renklendirmek için bir on altılık değere ayarlanmıştır:
<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>
backgroundColor seçeneğiyle satırların arka plan rengini kontrol edebilirsiniz:
backgroundColor onaltılık değer olarak belirtilir. Burada, parçaları bir
konferansta göstermek için colorByRowLabel ile eşliyoruz:
<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>
Ardından arka plan rengini satır dizinine göre, alternatif veya alternatif olmayan olarak ayarlamak için alternatingRowStyle seçeneğini (etkin v51+) kullanın:
<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>
Çubukların renklerini ayrı ayrı kontrol etmek istiyorsanız colors seçeneğini kullanın:
colors, onaltılık değerler dizisini alır ve çubuklara şu sırayla uygulanır:
<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>
Grafiğiniz listelenenden daha fazla renk gerektiriyorsa grafikte singleColor, listedeki ilk renge ayarlanmış gibi davranır. (Bu durum yalnızca zaman çizelgeleri için değil, tüm Google Listeleri için geçerlidir.)
Bağımsız çubukların renklerini kontrol etmenin bir başka yolu da stil rolü olan bir sütun kullanmaktır.
Stil sütunu eklemek ve doldurmak için kod:
<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>
Yazı tiplerini değiştirme
rowLabelStyle içeren her satırın etiketleri için yazı tipini ve yazı tipini, barLabelStyle içeren her çubuktaki etiketleri seçebilirsiniz. Her ikisi de aşağıda gösterilmiştir.
Not: Kullanıcılarınızın tarayıcılarının oluşturabileceği yazı tipleri seçtiğinizden emin olun.
<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>
barLabel metninin rengini ayarlayamazsınız.
Çakışan kılavuz çizgileri
Google Listeleri, zaman çizelgesi kılavuz çizgilerinin belirsizleşmesini önlemek için çubuk uç noktalarında küçük ayarlamalar yapar. Bu durumu önlemek için avoidOverlappingGridLines seçeneğini false olarak ayarlayın.
Bunun etkisini göstermek için biri çakışma çizgili, diğeri olmayan ızgara örneğine bakalım.
Kılavuz çizgileri ile çakışan kod:
<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>
İpuçlarını özelleştirme
Beş sütunlu bir veri tablosuna ipucu sütunu ekleyerek kullanıcıların zaman çizelgesi çubuklarının üzerine geldiklerinde ne göreceğini özelleştirebilirsiniz. Varsayılan olmayan ipuçları sağlamak üzere veri tablonuzun her satırında beş sütun (satır etiketi, çubuk etiket, araç ipucu, başlangıç ve bitiş) bulunmalıdır:
Fareyle bir çubuğun üzerine geldiğinizde, üçüncü sütunda tanımlanan metni içeren bir ipucu gösterilir. Bu grafikte, ipuçlarımızın üçüncü sütunda bulunabilmesi için ikinci sütunu sahte değerler (burada, null) olarak ayarlamamız gerekir.
<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>
Yükleniyor
google.charts.load paket adı timeline:
google.charts.load("current", {packages: ["timeline"]});
Görselleştirmenin sınıf adı: google.visualization.Timeline
var visualization = new google.visualization.Timeline(container);
Veri biçimi
Satırlar: Tablodaki her satır, zaman çizelgesi çubuğunu temsil eder.
Sütunlar:
| Sütun 0 | 1. Sütun | 2. Sütun | 3. Sütun | 4. Sütun | |
|---|---|---|---|---|---|
| Amaç: | Satır etiketi | Çubuk etiketi (isteğe bağlı) | İpucu (isteğe bağlı) | Başlat | Bitiş |
| Veri Türü: | string | string | string | sayı veya tarih | sayı veya tarih |
| Rol: | veri | veri | ipucu | veri | veri |
Yapılandırma seçenekleri
| Ad | |
|---|---|
| alternatifStil |
Grafiğin arka plan rengini satır dizinine göre değiştirip değiştirmemesi (ör. eşit şekilde dizine eklenen satırların daha koyu bir tonla arka planının tonlaması mı). Yanlış değerine ayarlanmışsa grafik arka planı tek tip bir renk olur. Doğruysa grafik arka planı, tonunu satır dizinine göre değiştirir. (Not: sürüm 51 ve sonraki sürümler) Tür: boole
Varsayılan: true
|
| Üstü çizili ızgara satırları kullanmaktan kaçının |
Görüntülü reklam öğelerinin (ör. zaman çizelgesindeki çubuklar), ızgara çizgilerini belirsiz kılıp kaplamaması. Yanlış değerine ayarlanırsa ızgara satırları görüntülü reklam öğeleri tarafından kapsanabilir. Doğru değerine ayarlanırsa görüntülü öğeler, ızgara çizgilerinin görünür olmasını sağlamak için değiştirilebilir. Tür: boole
Varsayılan: true
|
| arka plan rengi |
Grafiğin ana alanının arka plan rengi. Basit bir HTML renk dizesi (ör. Tür: dize veya nesne
Varsayılan: "white"
|
| renkler |
Grafik öğeleri için kullanılacak renkler. Her bir öğenin HTML renk dizesi olduğu bir dize dizisi. Örneğin: Tür: Dize dizisi
Varsayılan: varsayılan renkler
|
| Etkileşimi etkinleştir |
Grafiğin kullanıcı tabanlı etkinliklerde bulunup bulunmadığı veya kullanıcı etkileşimine tepki verip vermediği. Yanlış değerine ayarlanırsa grafik, "select" (seç) veya diğer etkileşime dayalı etkinlikleri atlar (ancak hazır veya hata etkinliklerini göndermez) ve fareyle üzerine gelindiğinde gösterilen metni görüntülemez veya kullanıcı girişine bağlı olarak başka şekilde değişiklik yapmaz. Tür: boole
Varsayılan: true
|
| yazı tipi adı |
Grafikteki tüm metinlerin varsayılan yazı tipi yüzü. Belirli grafik öğelerinin özelliklerini kullanarak bunu geçersiz kılabilirsiniz. Tür: dize
Varsayılan: "score"
|
| yazı tipi boyutu |
Grafikteki tüm metinlerin piksel cinsinden varsayılan yazı tipi boyutu. Belirli grafik öğelerinin özelliklerini kullanarak bunu geçersiz kılabilirsiniz. Tür: sayı
Varsayılan: otomatik
|
| Zorunlu iFrame |
Grafiği satır içi bir çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın; tüm IE8 grafikleri i-frame'ler ile çizilmiştir.) Tür: boole
Varsayılan: false
|
| yükseklik |
Grafiğin piksel cinsinden yüksekliği. Tür: sayı
Varsayılan: kapsayıcı öğenin yüksekliği
|
| zaman çizelgesi.barEtiket Stili |
Çubuk etiket metin stilini belirten bir nesne. Biçim şu şekildedir: {fontName: <string>, fontSize: <string>}
Bu tabloda Tür: nesne
Varsayılan: null
|
| Zaman Çizelgesi.colorByRowLabel |
Doğru değerine ayarlanırsa satırdaki her çubuğun rengi aynı olur. Varsayılan ayar, çubuk etiketi başına bir renk kullanmaktır. Tür: boole
Varsayılan: false
|
| Zaman Çizelgesi.groupByRowLabel |
Yanlış değerine ayarlanırsa her Tür: boole
Varsayılan: true
|
| Zaman Çizelgesi.rowLabelStyle |
Satır etiketi metin stilini belirten bir nesne. Biçim şu şekildedir: {color: <string>, fontName: <string>, fontSize: <string>}
Tür: nesne
Varsayılan: null
|
| zaman çizelgesi.showBarEtiketler |
Yanlış değerine ayarlanırsa çubuk etiketleri atlar. Varsayılan olarak, bu anahtar kelimeler gösterilir. Tür: boole
Varsayılan: true
|
| zaman çizelgesi.showRowLabels |
Yanlış değerine ayarlanırsa satır etiketleri çıkarılır. Varsayılan olarak, bu anahtar kelimeler gösterilir. Tür: boole
Varsayılan: true
|
| zaman çizelgesi.tekRenk |
Tüm çubukların renkleri aynı. Onaltılık değer olarak belirtilir (ör. "#8d8"). Tür: dize
Varsayılan: null
|
| ipucu.ishtml |
SVG ile oluşturulan (HTML tarafından oluşturulan yerine) ipuçlarını kullanmak için Not: HTML araç ipucu içeriğinin ipuçu sütunu veri rolü aracılığıyla özelleştirilmesi, Balon Listesi görselleştirmesi tarafından desteklenmez. Tür: boole
Varsayılan: true
|
| ipucu.tetikleyici |
İpucunun gösterilmesine neden olan kullanıcı etkileşimi:
Tür: dize
Varsayılan: "odak"
|
| genişlik |
Grafiğin piksel cinsinden genişliği. Tür: sayı
Varsayılan: kapsayıcı öğenin genişliği
|
Yöntemler
| Yöntem | |
|---|---|
draw(data, options) |
Grafiği çizer. Grafik, yalnızca Dönüş Türü: yok
|
clearChart() |
Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır. Dönüş Türü: yok
|
getSelection() |
Seçilen grafik varlıklarından oluşan bir diziyi döndürür.
Seçilebilir öğeler çubuklar, açıklama girişi ve kategorilerdir.
Bu grafik için herhangi bir zamanda yalnızca bir varlık seçilebilir.
Dönüş Türü: Seçim öğeleri dizisi
|
Etkinlikler
| Ad | |
|---|---|
error |
Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir. Özellikler: kimlik, mesaj
|
onmouseover |
Kullanıcı görsel bir varlığın üzerine geldiğinde tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Çubuk, veri tablosundaki bir hücreyle, bir sütunla ilgili açıklama girişi (satır dizini null) ve bir satırla kategori (sütun dizini null) arasındadır. Özellikler: satır, sütun
|
onmouseout |
Kullanıcı görsel varlıktan fareyi uzaklaştırdığında tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Çubuk, veri tablosundaki bir hücreyle, bir sütunla ilgili açıklama girişi (satır dizini null) ve bir satırla kategori (sütun dizini null) arasındadır. Özellikler: satır, sütun
|
ready |
Grafik, harici yöntem çağrıları için hazır. Grafik ve çizim yöntemlerinden sonra etkileşimde bulunmak isterseniz Özellikler: yok
|
select |
Kullanıcı bir görsel öğeyi tıkladığında tetiklenir. Nelerin seçildiğini öğrenmek için Özellikler: yok
|
Veri politikası
Tüm kod ve veriler tarayıcıda işlenir ve oluşturulur. Hiçbir sunucuya veri gönderilmez.