Omówienie
Oś czasu to wykres przedstawiający wykorzystanie zasobów na przestrzeni czasu. Gdy zarządzasz projektem oprogramowania i chcesz pokazać, kto i co zajmuje się danym problemem lub organizujesz konferencję i chcesz zaplanować salę konferencyjną, często przydają się wizualizacje. Typowym rodzajem osi czasu jest wykres Gantta.
Uwaga: w obiektach Data JavaScript miesiące są indeksowane od zera i rosną o jedenaście, gdzie 0 stycznia to 0, a 11 grudnia. Jeśli oś czasu wygląda na miesiąc, najprawdopodobniej tak się dzieje. Więcej informacji znajdziesz na stronie Daty i godziny.
Prosty przykład
Załóżmy, że chcesz wykreślić terminy prezydentów Stanów Zjednoczonych. Przewodniczący są „zasobami” – możemy nakreślić każdy z nich jako bar:
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 narysowania wykresu podczas renderowania strony metoda drawChart() tworzy instancję google.visualization.Timeline(), a następnie wypełnia po dataTable wierszem dla każdego prezydenta.
W kolumnie dataTable pierwsza kolumna zawiera imię prezydenta, a druga i trzecia kolumna są godzinami rozpoczęcia i zakończenia. Typ kodu JavaScript to Date, ale mogą to być tylko liczby proste.
Na koniec wywołujemy metodę draw() wykresu, która wyświetla ją w elemencie div o tym samym identyfikatorze (timeline), który został użyty, gdy zadeklarowano container w pierwszym wierszu 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>
Oś czasu w Wykresach Google można dostosowywać, a w poniższych przykładach pokazujemy, jak dostosowywać wygląd osi czasu.
Oznaczanie słupków
Oprócz etykiet wierszy („Washington”, „Adams”, „Jefferson” powyżej) możesz też oznaczać poszczególne słupki. Tutaj zmieniamy etykiety wierszy na proste liczby i umieszczamy nazwisko każdego prezydenta na pasku.
W tym kodzie wstawiliśmy nową kolumnę do danych, dzięki której można przechowywać etykiety słupkowe: pełne imię i nazwisko każdego prezydenta. Gdy na osi czasu znajdują się 4 kolumnydataTable, pierwsza jest interpretowana jako etykieta wiersza, druga jako etykieta słupkowa, a trzecia jako 4 jako początkowa i końcowa.
<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>
Nowe etykiety wierszy powyżej nie są przydatne, więc usuń je z osią czasu showRowLabels.
Domyślnie showRowLabels to true. Ustawienie 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 ułożyć oś czasu w bardziej skomplikowany sposób, dodamy do wykresu wiceprezydentów i tajnych sekretarzy stanu. John Adams był wiceprezesem, zanim został prezydentem. Thomas Jefferson był sekretarzem stanu, potem wiceprezesem i prezydentem.
Na osi czasu zasób ma ten sam kolor nawet wtedy, gdy jest widoczny w wielu wierszach, więc na wykresie poniżej każda osoba jest przedstawiona w jednym kolorze.
Niektóre obiekty tajne stanu są używane bardzo krótko, więc ten wykres jest dobrym testem oznaczania etykietami. Gdy etykieta jest za duża dla paska, zostanie ona skrócona lub usunięta (zależnie od rozmiaru paska). Użytkownicy mogą najechać kursorem na pasek, aby uzyskać informacje o etykietkach.
Na osi czasu będą widoczne wiersze w odpowiedniej kolejności – będzie to nad prezydentem sekretarza stanu, a w podanej kolejności. Układ drążków jest jednak określany wyłącznie na podstawie czasu rozpoczęcia i zakończenia, dlatego zamiana 2 tajnych sekretarów stanu lub 2 prezydentó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 wierszu
W przeciwieństwie do papieży może być tylko jeden prezydent Stanów Zjednoczonych. Jeśli więc oznaczymy wszystkie wiersze jako „prezydenta”, oś czasu pozwoli połączyć 3 wiersze pierwszego wykresu w 1 wiersz, co zapewni bardziej czytelną prezentację. Możesz zarządzać tym działaniem za pomocą opcji groupByRowLabel.
Oto domyślne działanie:
Ustawmy teraz groupByRowLabel na false i podzielmy jeden wiersz na trzy:
Aby wyłączyć grupowanie:
<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>
Kontrola nad kolorami
Domyślnie Wykresy Google wybierają kolory zoptymalizowane pod kątem estetyki i czytelności (w tym wśród użytkowników z wadami wzroku). Domyślne działanie możesz dostosować za pomocą opcji colorByRowLabel, singleColor, backgroundColor i colors.
Opcja colorByRowLabel oznacza tak samo wszystkie paski w tym samym wierszu. Może to być dobry wybór w przypadku odstępów między słupkami.
colorByRowLabel domyślnie ma wartość false, więc zastępujemy ją ustawieniem 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 paski miały ten sam kolor niezależnie od tego, w którym wierszu się znajdują, użyj opcji singleColor:
W poniższym kodzie singleColor ustawia wartość szesnastkową koloru wszystkich pasków jasnojasnych:
<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>
Kolor tła wierszy możesz określić za pomocą opcji backgroundColor:
backgroundColor jest określony jako wartość szesnastkowa. Łączymy go z colorByRowLabel, aby wyświetlać ścieżki konferencyjne:
<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>
Następnie, aby ustawić kolor tła naprzemiennie lub bez zmian na podstawie indeksu wiersza, użyj opcji alternatingRowStyle (aktywnej wersji 51+):
<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 pasków, użyj opcji colors:
colors pobiera tablicę wartości szesnastkowych, które są stosowane do słupków w następującej 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 na wykresie potrzeba więcej kolorów niż na liście, wykres będzie wyglądał tak, jakby singleColor miał ustawiony pierwszy kolor na liście. (Dotyczy to wszystkich wykresów Google, nie tylko osi czasu).
Innym sposobem kontrolowania kolorów poszczególnych pasków jest użycie kolumny z rolą stylu.
Kod do dodania i uzupełnienia 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 czcionki i czcionkę etykiet każdego wiersza w rowLabelStyle oraz etykiety na każdym pasku z barLabelStyle. Oba te elementy zostały przedstawione poniżej.
Uwaga: wybierz krój czcionki, który będzie można renderować 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 barLabel.
Nakładające się linie siatki
W Wykresach Google wprowadzono drobne zmiany w punktach końcowych słupka, aby uniknąć przesłaniania linii siatki na osi czasu. Aby temu zapobiec, ustaw opcję avoidOverlappingGridLines na false.
Aby zilustrować efekt, skorzystaj z 2 przykładów: pierwszego z nałożonymi siatką, a drugiego nie.
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
Aby dostosować informacje wyświetlane użytkownikom po najechaniu kursorem myszy na słupki osi czasu, dodaj kolumnę z etykietką do 5-kolumnowej tabeli danych. Aby można było podać etykietki inne niż domyślne, każdy wiersz tabeli danych musi zawierać wszystkie 5 kolumn (etykieta wiersza, etykieta słupkowa, etykietka, początek i koniec):
Najechanie kursorem na słupek powoduje wyświetlenie etykietki z tekstem określonym w trzeciej kolumnie. Na tej karcie musimy umieścić w drugiej kolumnie fikcyjne wartości (tutaj null), aby nasze etykietki mogły znaleźć się 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 w tabeli odpowiada słupkowi na osi czasu.
Kolumny:
| Kolumna 0 | Kolumna 1 | Kolumna 2 | Kolumna 3 | Kolumna 4 | |
|---|---|---|---|---|---|
| Cel: | Etykieta wiersza | Etykieta paska (opcjonalnie) | Etykietka (opcjonalnie) | Uruchom | Koniec |
| Typ danych: | tekst | tekst | tekst | liczba lub data | liczba lub data |
| Rola: | dane | dane | etykietka | dane | dane |
Opcje konfiguracji
| Nazwa | |
|---|---|
| zmienne wiersze |
Określa, czy wykres ma zmieniać kolor tła w pozycji w wierszu (np. kolor tła w przypadku zindeksowanych wierszy jest ciemniejszy). Jeśli ma wartość Fałsz, tło wykresu jest jednolite. Jeśli ma wartość true (prawda), tło wykresu będzie zmieniać odcień według indeksu wiersza. (Uwaga: aktywna wersja 51+) Typ: wartość logiczna
Wartość domyślna: true
|
| Unikaj nakładania się linii siatki |
Określa, czy elementy displayowe (np. słupki na osi czasu) powinny zasłaniać linie siatki. Jeśli ma wartość Fałsz, linie siatki mogą być całkowicie zasłonięte przez elementy do wyświetlania. Jeśli ma wartość true (prawda), elementy displayowe można zmieniać, aby linie siatki były widoczne. Typ: wartość logiczna
Wartość domyślna: true
|
| backgroundColor, |
Kolor tła głównego obszaru wykresu. Może to być prosty ciąg kolorów HTML, taki jak Typ: ciąg znaków lub obiekt
Domyślny: „biały”.
|
| kolory |
Kolory elementów wykresu. Tablica ciągów znaków, w których każdy jest ciągiem koloru HTML, np. Typ: Tablica ciągów znaków
Domyślny: kolory domyślne.
|
| włącz interfejs interaktywny |
Określa, czy wykres generuje zdarzenia oparte na użytkownikach lub reaguje na ich interakcje. Jeśli ma wartość false (fałsz), wykres nie zwróci zdarzenia wyboru ani innych zdarzeń związanych z interakcją (ale będzie zwracać zdarzenia lub błędy) ani nie będzie zawierać tekstu wyświetlanego po najechaniu kursorem ani innego działania w zależności od danych wejściowych użytkownika. Typ: wartość logiczna
Wartość domyślna: true
|
| Czcionka |
Domyślny krój czcionki całego tekstu na wykresie. Możesz zastąpić tę opcję, używając właściwości określonych elementów wykresu. Typ: ciąg znaków
Domyślny: „solarmora”
|
| rozmiar czcionki |
Domyślny rozmiar czcionki całego tekstu na wykresie (w pikselach). Możesz zastąpić tę opcję, używając właściwości określonych elementów wykresu. Typ: liczba
Domyślna: automatycznie.
|
| forceIFrame |
Rysuje wykres wewnątrz wbudowanej ramki. (Pamiętaj, że ta opcja jest ignorowana w IE8 – wszystkie wykresy IE8 są ujęte w ramki iFrame). Typ: wartość logiczna
Wartość domyślna: false
|
| wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna: wysokość elementu, który go zawiera.
|
| oś czasu.barLabelStyle |
Obiekt określający styl tekstu etykiety słupkowej. Ma ten format: {fontName: <string>, fontSize: <string>}
Zobacz też Typ: obiekt
Domyślne: null
|
| osi czasu.kolorByRowLabel |
Jeśli ma wartość Prawda, kolory na poszczególnych paskach są takie same. Domyślnym kolorem jest 1 kolor na etykietę paska. Typ: wartość logiczna
Wartość domyślna: false
|
| oś czasu.grupaByRowLabel |
Jeśli ma wartość Fałsz, każdy wiersz w wierszu Typ: wartość logiczna
Wartość domyślna: true
|
| harmonogram.wierszetykietyStyl |
Obiekt określający styl tekstu etykiety wiersza. Ma ten format: {color: <string>, fontName: <string>, fontSize: <string>}
Typ: obiekt
Domyślne: null
|
| oś czasu.showBarLabels |
Jeśli ma wartość Fałsz, etykiety paska są pomijane. Domyślne ustawienie to wyświetlanie ich. Typ: wartość logiczna
Wartość domyślna: true
|
| osi czasu.etykietywierszowe |
Jeśli ma wartość Fałsz, etykiety wierszy są pomijane. Domyślne ustawienie to wyświetlanie ich. Typ: wartość logiczna
Wartość domyślna: true
|
| oś czasu.jedenkolor |
Kolorowe paski tak samo. Wartość określona jako wartość szesnastkowa (np. „#8d8”). Typ: ciąg znaków
Domyślne:null
|
| tooltip.isHtml |
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
|
| tooltip.trigger |
Interakcja użytkownika, która powoduje wyświetlenie etykietki:
Typ: ciąg znaków
Domyślny: „focus”
|
| szerokość |
Szerokość wykresu w pikselach. Typ: liczba
Domyślna – szerokość elementu, który zawiera.
|
Metody
| Metoda | |
|---|---|
draw(data, options) |
Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia Typ zwrotu: brak
|
clearChart() |
Czyści wykres i usuwa wszystkie przydzielone zasoby. Typ zwrotu: brak
|
getSelection() |
Zwraca tablicę wybranych elementów wykresu.
Elementy, które można wybrać, to paski, legendy i kategorie.
Na tym wykresie w danym momencie możesz wybrać tylko 1 element.
Typ zwrotu: tablica elementów wyboru.
|
Zdarzenia
| Nazwa | |
|---|---|
error |
Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. Właściwości: id, message
|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na jednostkę wizualną. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Pasek odpowiada komórce w tabeli danych, wpis legendy w kolumnie (indeks wiersza ma wartość null) i kategoria w wierszu (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna.
|
onmouseout |
Uruchamiane, gdy użytkownik odsunie kursor od jednostki wizualnej. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Pasek odpowiada komórce w tabeli danych, wpis legendy w kolumnie (indeks wiersza ma wartość null) i kategoria w wierszu (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna.
|
ready |
Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik 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 do żadnego serwera.