Omówienie
Oś czasu to wykres przedstawiający wykorzystanie zbioru zasobów w czasie. Jeśli zarządzasz projektem oprogramowania i chcesz pokazać, kto co i kiedy robi, lub jeśli organizujesz konferencję i chcesz zaplanować sale konferencyjne, często rozsądnym rozwiązaniem w formie wizualizacji jest oś czasu. Jednym z popularnych typów osi czasu jest wykres Gantta.
Uwaga: w obiektach dat w języku JavaScript miesiące są indeksowane, zaczynając od zera i kończą się jedenaściem, przy czym styczeń to miesiąc 0, a grudzień to miesiąc 11. Jeśli oś czasu wydaje się nieaktualna na miesiąc, prawdopodobnie to jest przyczyną. Więcej informacji znajdziesz na stronie Daty i godziny.
Prosty przykład
Załóżmy, że chcesz stworzyć wykres, w którym Amerykańscy prezydenci odbywali swoje kadencje. W tym przypadku „zasobami” są prezydenci, a kadencja każdego prezydenta można zaplanować jako taks.
Najechanie kursorem na słupek powoduje wyświetlenie etykietki z bardziej szczegółowymi informacjami.
Po wczytaniu pakietu timeline i zdefiniowaniu wywołania zwrotnego w celu wygenerowania wykresu po wyrenderowaniu strony metoda drawChart() tworzy instancję google.visualization.Timeline(), a następnie wypełnia dataTable, podając po jednym wierszu dla każdego prezydenta.
W polu dataTable pierwsza kolumna zawiera imię i nazwisko prezydenta, a druga i trzecia kolumny to czas rozpoczęcia i zakończenia. Ich format jest typu Date JavaScript, ale mogą to być też zwykłe liczby.
Na koniec wywołujemy metodę draw() wykresu, która wyświetla ją w elemencie div z tym samym identyfikatorem (timeline), który był używany, gdy zadeklarowano container w pierwszym wierszu pola 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>
Osie czasu w Wykresach Google można dostosowywać. W poniższych przykładach przedstawiamy kilka typowych sposobów dostosowywania ich wyglądu.
Oznaczanie słupków etykietami
Oprócz etykiet wierszy („Waszyngton”, „Adams”, „Jefferson” powyżej) możesz oznaczać etykietami poszczególne słupki. Zmieniamy tu etykiety wierszy na proste liczby i umieszczamy nazwisko każdego prezydenta na pasku.
W tym kodzie wstawiliśmy do danych nową kolumnę z etykietami słupkowymi: pełnym imieniem i nazwiskiem każdego prezydenta. Jeśli na osi czasu dataTable występują 4 kolumny, pierwsza z nich jest interpretowana jako etykieta wiersza, druga jako etykieta słupka, a trzecia i czwarta jako początek i koniec.
<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>
Nasze nowe etykiety wierszy powyżej nie zawierają zbyt wielu informacji, dlatego usuń je za pomocą opcji showRowLabels osi czasu.
Domyślnie showRowLabels to true. Ustawienie wartości false powoduje usunięcie etykiet wierszy:
<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>
Przykład zaawansowany
Aby skomplikować oś czasu, dodajmy do wykresu wiceprezydentów i sekretarzy stanu. John Adams był wiceprezesem zanim został prezydentem, a Thomas Jefferson był sekretarzem stanu, a później wiceprezydentem i prezydentem.
Na osi czasu zasób ma ten sam kolor, nawet jeśli występuje w wielu wierszach, więc na wykresie poniżej każda osoba jest reprezentowana w tym samym kolorze.
Niektórzy sekretarze stanu służyli bardzo krótko, więc ten wykres jest dobrym testem oznaczania etykietami. Jeśli etykieta jest za duża dla paska, w zależności od jego rozmiaru zostanie skrócona lub usunięta. Użytkownicy mogą zawsze najechać na pasek, aby wyświetlić etykietkę.
Na osi czasu wiersze zostaną rozmieszczone w odpowiedniej kolejności – między prezydentem a wiceprezydentem a sekretarzem stanu – ponieważ takie są ich kolejność w kodzie poniżej. Układ słupków zależy jednak wyłącznie od godziny rozpoczęcia i zakończenia, dlatego zamiana 2 sekretów stanu lub 2 prezydentów w dataTable nie ma wpływu na wykres.
<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>
Umieszczanie słupków w jednym rzędzie
W przeciwieństwie do papieży w danym momencie może być tylko 1 prezydent USA, więc jeśli oznaczymy wszystkie wiersze etykietą „Prezydent”, oś czasu połączy 3 wiersze z pierwszego wykresu w 1 wiersz, aby zapewnić bardziej przejrzystą prezentację. Możesz kontrolować to zachowanie za pomocą opcji groupByRowLabel.
Oto domyślne zachowanie:
Ustawmy teraz wartość groupByRowLabel na false i podzielmy jeden wiersz na trzy:
Kod służący do wyłączania grupowania:
<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>
Kontrolowanie kolorów
Domyślnie Wykresy Google wybierają kolory zoptymalizowane pod kątem estetyki i czytelności (dotyczy to również użytkowników z wadami wzroku). Możesz dostosować domyślne działanie za pomocą opcji colorByRowLabel, singleColor, backgroundColor i colors.
Opcja colorByRowLabel nadaje kolor wszystkim słupkom w tym samym wierszu. Może to być dobry wybór,
gdy między słupkami są przerwy.
Domyślna wartość colorByRowLabel to false, więc w tym miejscu zastąpimy ją i ustawimy na 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>
Jeśli chcesz, aby wszystkie słupki miały ten sam kolor niezależnie od wiersza, w którym się znajdują, użyj opcji singleColor:
W poniższym kodzie parametr singleColor ma wartość szesnastkową, która oznacza, że wszystkie słupki mają kolor jasnozielony:
<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>
Kolorem tła wierszy możesz kontrolować za pomocą opcji backgroundColor:
Wartość backgroundColor jest podana jako wartość szesnastkowa. W tym przykładzie używamy go z colorByRowLabel, aby wyświetlić ścieżki używane podczas rozmowy:
<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>
Aby następnie ustawić kolor tła na zmienny lub niezmienny w zależności od indeksu wiersza, użyj opcji alternatingRowStyle (aktywna w wersji 51 lub nowszej):
<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>
Jeśli chcesz kontrolować kolory poszczególnych słupków, użyj opcji colors:
colors pobiera tablicę wartości szesnastkowych, które są stosowane do słupków w kolejności:
<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>
Jeśli wykres wymaga więcej kolorów niż jest na liście, będzie się wyświetlać tak, jakby kolor singleColor był ustawiony na pierwszy kolor na liście. (dotyczy to wszystkich list przebojów Google, nie tylko osi czasu).
Innym sposobem sterowania kolorami poszczególnych słupków jest użycie kolumny z rolą stylu.
Kod, który ma zostać dodany do kolumny stylu:
<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>
Zmienianie czcionek
Możesz wybrać krój i czcionkę etykiet każdego wiersza w polu rowLabelStyle, a etykietą barLabelStyle – dla etykiet na każdym pasku. Poniżej znajdziesz informacje na temat obu z nich.
Uwaga: pamiętaj, by wybrać kroje czcionki, które będą mogły renderować się w przeglądarkach użytkowników.
<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>
Nie możesz ustawić koloru tekstu w języku barLabel.
Nakładające się linie siatki
Wykresy Google wprowadzają niewielkie poprawki w punktach końcowych słupków, by nie zasłaniać linii siatki na osi czasu. Aby temu zapobiec, ustaw opcję avoidOverlappingGridLines na false.
Aby zilustrować efekt, oto 2 przykłady: pierwszy z nakładającą się siatką i drugi bez.
Oto kod, który nakłada się na linie siatki:
<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>
Dostosowywanie etykietek
Możesz dostosować to, co widzą użytkownicy po najechaniu kursorem na słupki osi czasu. Aby to zrobić, dodaj kolumnę etykietki do pięciokolumnowej tabeli danych. Aby wyświetlić etykietki inne niż domyślne, każdy wiersz tabeli danych musi zawierać wszystkie 5 kolumn (etykieta wiersza, etykieta słupka, etykietka, początek i koniec):
Najechanie kursorem na słupek powoduje wyświetlenie etykietki z tekstem zdefiniowanym w trzeciej kolumnie. Na tym wykresie w drugiej kolumnie musimy ustawić wartości zastępcze (tutaj, null), aby nasze etykietki mogły się pojawić w trzeciej kolumnie.
<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>
Wczytuję
Nazwa pakietu google.charts.load to timeline:
google.charts.load("current", {packages: ["timeline"]});
Nazwa klasy wizualizacji to google.visualization.Timeline:
var visualization = new google.visualization.Timeline(container);
Format danych
Wiersze: każdy wiersz tabeli reprezentuje pasek osi czasu.
Kolumny:
| Kolumna 0 | Kolumna 1 | Kolumna 2 | Kolumna 3 | Kolumna 4 | |
|---|---|---|---|---|---|
| Przeznaczenie: | Etykieta wiersza | Etykieta słupka (opcjonalnie) | Etykietka (opcjonalnie) | Uruchom | Zakończ |
| Typ danych: | string, | string, | string, | liczba lub data | liczba lub data |
| Rola: | dane | dane | etykietka | dane | dane |
Opcje konfiguracji
| Nazwa | |
|---|---|
| alternatingRowStyle |
Określa, czy wykres powinien zmieniać kolor tła według indeksu wiersza (np. odcień tła wierszy, które są indeksowane równomiernie, ciemniejszym odcieniem). Jeśli ma wartość fałsz, tło wykresu ma jeden jednolity kolor. Jeśli ma wartość true (prawda), tło wykresu będzie zmieniać odcień według indeksu wiersza. (Uwaga: aktywna wersja 51 lub nowsza) Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
| avoidOverlappingGridLines |
Określa, czy wyświetlane elementy (np. paski na osi czasu) powinny zasłaniać linie siatki. Jeśli ma wartość Fałsz, linie siatki mogą być w całości zasłonięte przez elementy wyświetlane. Jeśli ma wartość prawda, wyświetlane elementy mogą być tak zmieniane, by linie siatki pozostały widoczne. Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
| backgroundColor |
Kolor tła głównego obszaru wykresu. Może to być prosty ciąg znaków koloru HTML, np. Typ: ciąg znaków lub obiekt
Domyślnie: „white”
|
| kolory |
Kolory elementów wykresu. Tablica ciągów znaków, w których każdy element jest ciągiem znaków koloru HTML, np. Typ: tablica ciągów znaków
Domyślne:kolory domyślne
|
| enableInteractivity |
Określa, czy wykres generuje zdarzenia dotyczące użytkowników czy reaguje na interakcję użytkownika. Jeśli ma wartość false (fałsz), wykres nie będzie wywoływać zdarzenia „select” ani innych zdarzeń związanych z interakcją (ale będzie generować zdarzenia gotowe lub zdarzenia błędu) i nie będzie wyświetlać tekstu wyświetlanego po najechaniu kursorem ani w inny sposób zmieniać się w zależności od danych wejściowych użytkownika. Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
| fontName |
Domyślna krój czcionki dla całego tekstu na wykresie. Możesz zastąpić to ustawienie za pomocą właściwości dla konkretnych elementów wykresu. Typ: ciąg znaków
Wartość domyślna: „Blogger”
|
| fontSize |
Domyślny rozmiar czcionki całego tekstu na wykresie (w pikselach). Możesz zastąpić to ustawienie za pomocą właściwości dla konkretnych elementów wykresu. Typ: liczba
Domyślne:automatyczne
|
| forceIFrame |
Rysuje wykres wewnątrz ramki wbudowanej. (Pamiętaj, że w IE8 ta opcja jest ignorowana – wszystkie wykresy w IE8 są rysowane w ramkach i-frame). Typ: wartość logiczna
Wartość domyślna: fałsz.
|
| wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna: wysokość elementu nadrzędnego.
|
| timeline.barLabelStyle |
Obiekt, który określa styl tekstu etykiety słupka. Format to: {fontName: <string>, fontSize: <string>}
Zobacz też w tej tabeli Typ: obiekt
Wartość domyślna:null
|
| timeline.colorByRowLabel |
Jeśli zasada ma wartość Prawda, każdy słupek w wierszu jest kolorowany w taki sam sposób. Domyślnie jeden kolor na etykietę słupka. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
| timeline.groupByRowLabel |
Jeśli ma wartość Fałsz, dla każdego wpisu Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
| timeline.rowLabelStyle |
Obiekt, który określa styl tekstu etykiety wiersza. Format to: {color: <string>, fontName: <string>, fontSize: <string>}
Typ: obiekt
Wartość domyślna:null
|
| timeline.showBarLabels |
Jeśli zasada ma wartość Fałsz, etykiety słupków są pomijane. Domyślnie są one wyświetlane. Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
| timeline.showRowLabels |
Jeśli ma wartość Fałsz, etykiety wierszy są pomijane. Domyślnie są one wyświetlane. Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
| timeline.singleColor |
Wszystkie kolory są takie same. Podana jako wartość szesnastkowa (np. „#8d8”). Typ: ciąg znaków
Wartość domyślna:null
|
| tooltip.isHtml |
Aby używać etykiet wyrenderowanych w formacie SVG (a nie renderowanych przez HTML), ustaw wartość Uwaga: wizualizacja wykresu bąbelkowego nie obsługuje dostosowywania zawartości etykietki HTML za pomocą roli danych kolumny etykietki. Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
| tooltip.trigger |
Interakcja użytkownika, która powoduje wyświetlenie etykietki:
Typ: ciąg znaków
Domyślnie: „fokus”
|
| szerokość |
Szerokość wykresu w pikselach. Typ: liczba
Domyślna: szerokość elementu nadrzędnego.
|
Metody
| Metoda | |
|---|---|
draw(data, options) |
Rysuje wykres. Wykres akceptuje kolejne wywołania metod dopiero po wywołaniu zdarzenia Return Type: brak
|
clearChart() |
Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby. Return Type: brak
|
getSelection() |
Zwraca tablicę wybranych elementów wykresu.
Elementy, które można wybrać, to paski, wpisy z legendy i kategorie.
Na tym wykresie w danym momencie można wybrać tylko 1 element.
Return Type: tablica elementów zaznaczenia.
|
Zdarzenia
| Nazwa | |
|---|---|
error |
Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd. Właściwości: identyfikator, komunikat
|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na element wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Słupek odpowiada komórce w tabeli danych, wpisowi legendy do kolumny (indeks wiersza ma wartość null) i kategorię wiersza (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna
|
onmouseout |
Uruchamiane, gdy użytkownik najedzie kursorem poza obiekt wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Słupek odpowiada komórce w tabeli danych, wpisowi legendy do kolumny (indeks wiersza ma wartość null) i kategorię wiersza (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna
|
ready |
Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody Właściwości: brak
|
select |
Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer Właściwości: brak
|
Zasady dotyczące danych
Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.