Übersicht
Eine Zeitachse ist ein Diagramm, das die Nutzung einer Reihe von Ressourcen im Zeitverlauf darstellt. Wenn Sie ein Softwareprojekt verwalten und veranschaulichen möchten, wer was wann macht, oder wenn Sie eine Konferenz organisieren und Konferenzräume planen müssen, ist ein Zeitplan oft eine angemessene Visualisierungsentscheidung. Ein beliebter Zeitachsentyp ist das Gantt-Diagramm.
Hinweis: In JavaScript Date-Objekten werden Monate bei null beginnen und bis elf nach oben gehen, wobei Januar der Monat 0 und Dezember der Monat 11 ist. Wenn Ihr Zeitplan um einen Monat abweicht, ist dies höchstwahrscheinlich der Grund dafür. Weitere Informationen finden Sie auf der Seite Datums- und Uhrzeitwerte.
Ein einfaches Beispiel
Nehmen wir an, Sie möchten aufzeichnen, wann amerikanische Präsidenten ihre Amtszeit verbüßt haben. Hier sind die "Ressourcen" die Präsidenten und wir können die Amtszeit der einzelnen Präsidenten als Balken darstellen:
Wenn Sie den Mauszeiger auf einen Balken bewegen, wird eine Kurzinfo mit ausführlicheren Informationen angezeigt.
Nachdem das timeline-Paket geladen und ein Callback zum Zeichnen des Diagramms beim Rendern der Seite definiert wurde, instanziiert die Methode drawChart() eine google.visualization.Timeline() und füllt dann eine dataTable mit einer Zeile für jeden Präsidenten.
In der dataTable enthält die erste Spalte den Namen des Präsidenten und die zweite und dritte Spalte die Start- und Endzeit. Sie haben den JavaScript-Typ Date, können aber auch einfache Zahlen sein.
Schließlich rufen wir die Methode draw() des Diagramms auf, die sie in einem div mit derselben Kennung (timeline) anzeigt, die bei der Deklaration von container in der ersten Zeile von drawChart() verwendet wurde.
<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>
Zeitachsen in Google Charts sind anpassbar. In den folgenden Beispielen zeigen wir Ihnen einige gängige Möglichkeiten, wie Sie das Erscheinungsbild von Zeitachsen anpassen können.
Balken beschriften
Zusätzlich zu den Zeilenbeschriftungen ("Washington", "Adams", "Jefferson" oben) können Sie einzelne Balken mit einem Label versehen. Hier ändern wir die Zeilenbeschriftungen in einfache Zahlen und setzen den Namen jedes Präsidenten in seine Leiste.
In diesem Code haben wir eine neue Spalte für die Balkenbeschriftungen in unsere Daten eingefügt: den vollständigen Namen jedes Präsidenten. Wenn die dataTable der Zeitachse vier Spalten enthält, wird die erste als Zeilenlabel, die zweite als Balkenlabel und die dritte und vierte als Start und Ende interpretiert.
<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>
Die neuen Zeilenlabels oben sind nicht sehr informativ. Entfernen wir sie also mit der Option showRowLabels der Zeitachse.
Standardmäßig ist showRowLabels auf true gesetzt. Wenn Sie ihn auf false festlegen, werden die Zeilenlabels entfernt:
<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>
Erweitertes Beispiel
Um unsere Zeitachse komplexer zu gestalten, fügen wir Vizepräsidenten und Staatssekretäre zu unserem Diagramm hinzu. John Adams war Vizepräsident, bevor er Präsident wurde, und Thomas Jefferson war Staatssekretär, Vizepräsident und schließlich Präsident.
In Zeitachsen hat eine Ressource auch dann die gleiche Farbe, wenn sie in mehreren Zeilen erscheint. Im folgenden Diagramm wird also jede Person in einer einheitlichen Farbe dargestellt.
Einige Staatssekretäre waren nur sehr kurz im Dienst, daher ist dieses Diagramm ein guter Test für die Labelerstellung. Wenn ein Label zu groß für den Balken ist, wird es je nach Balkengröße abgekürzt oder entfernt. Nutzer können den Mauszeiger jederzeit auf den Balken bewegen, um Kurzinfo-Informationen zu erhalten.
In der Zeitachse werden die Zeilen der Reihe nach angeordnet (Präsident über Vizepräsident und Vizepräsident über Außenminister), denn diese Reihenfolge ist im Code unten angegeben. Das Layout der Balken wird jedoch ausschließlich durch die Start- und Endzeiten bestimmt, sodass der Austausch von zwei Staatssekretären oder zwei Präsidenten in der dataTable keine Auswirkungen auf das Diagramm hat.
<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>
Balken auf eine Zeile setzen
Im Gegensatz zu Päpsten kann es jeweils nur einen US-Präsidenten geben. Wenn wir also alle unsere Zeilen als „President“ kennzeichnen, werden auf der Zeitachse die drei Zeilen unseres ersten Diagramms in einer Zeile zusammengefasst, um die Darstellung übersichtlicher zu gestalten. Dieses Verhalten können Sie mit der Option groupByRowLabel steuern.
Das ist das Standardverhalten:
Setzen wir nun groupByRowLabel auf false und teilen die eine Zeile in drei Zeilen auf:
Code zum Deaktivieren der Gruppierung:
<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>
Farben festlegen
Standardmäßig werden in Google Charts Farben ausgewählt, die im Hinblick auf Ästhetik und Lesbarkeit optimiert sind (auch für Nutzer mit Sehbeeinträchtigungen). Mit den Optionen colorByRowLabel, singleColor, backgroundColor und colors können Sie das Standardverhalten anpassen.
Mit der Option colorByRowLabel werden alle Balken in derselben Zeile farblich dargestellt. Dies kann eine gute Wahl sein, wenn es Lücken
zwischen den Balken gibt.
colorByRowLabel ist standardmäßig auf false gesetzt. Hier wird dieser Wert überschrieben und auf true gesetzt.
<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>
Wenn alle Balken unabhängig von der Zeile, in der sie sich befinden, dieselbe Farbe haben sollen, verwenden Sie die Option singleColor:
Im folgenden Code ist singleColor auf einen Hexadezimalwert gesetzt, um alle Balken hellgrün zu färben:
<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>
Mit der Option backgroundColor können Sie die Hintergrundfarbe der Zeilen festlegen:
backgroundColor wird als Hexadezimalwert angegeben. Hier kombinieren wir es mit colorByRowLabel, um Tracks in einer Konferenz anzuzeigen:
<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>
Verwenden Sie dann die Option alternatingRowStyle (aktiv ab Version 51), um die Hintergrundfarbe auf abwechselnd oder nicht alternierend nach Zeilenindex einzustellen:
<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>
Wenn Sie die Farben einzelner Balken steuern möchten, verwenden Sie die Option colors:
Für colors wird ein Array von Hexadezimalwerten verwendet, die der Reihe nach auf die Balken angewendet werden:
<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>
Wenn für Ihr Diagramm mehr Farben erforderlich sind als aufgeführt, verhält es sich so, als wäre singleColor auf die erste Farbe in der Liste gesetzt. Dies gilt für alle Google Charts, nicht nur für Zeitpläne.
Eine weitere Möglichkeit, die Farben einzelner Balken zu steuern, ist die Verwendung einer Spalte mit der Stilrolle.
Der Code zum Hinzufügen und Ausfüllen einer Stilspalte:
<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>
Schriftarten ändern
Sie können die Schriftart und Schriftart für die Labels jeder Zeile mit rowLabelStyle und für die Labels auf jedem Balken mit barLabelStyle auswählen. Beides wird nachfolgend beschrieben.
Hinweis: Wählen Sie unbedingt Schriftarten aus, die von den Browsern Ihrer Nutzer gerendert werden können.
<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>
Die Farbe von barLabel-Text kann nicht festgelegt werden.
Überlappende Gitternetzlinien
In Google Charts werden kleine Anpassungen an den Balkenendpunkten vorgenommen, um zu vermeiden, dass die Gitternetzlinien der Zeitachse verdeckt werden. Wenn Sie dies verhindern möchten, legen Sie die Option avoidOverlappingGridLines auf false fest.
Hier sind zwei Beispiele, um den Effekt zu veranschaulichen: das erste mit einer überlappenden Gitternetzlinie und das zweite ohne.
Hier ist Code, der Gitternetzlinien überschneidet:
<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>
Kurzinfos anpassen
Sie können anpassen, was Nutzer sehen, wenn sie den Mauszeiger auf die Balken einer Zeitachse bewegen. Fügen Sie dazu einer fünfspaltigen Datentabelle eine Kurzinfospalte hinzu. Damit nicht standardmäßige Kurzinfos bereitgestellt werden können, muss jede Zeile der Datentabelle alle fünf Spalten enthalten (Zeilenlabel, Balkenlabel, Kurzinfo, Start und Ende):
Wenn Sie den Mauszeiger auf einen Balken bewegen, wird eine Kurzinfo mit dem in der dritten Spalte definierten Text angezeigt. In diesem Diagramm muss die zweite Spalte auf Dummy-Werte gesetzt werden (hier null), damit unsere Kurzinfos in der dritten Spalte vorhanden sind.
<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>
Wird geladen
Der Paketname google.charts.load lautet timeline:
google.charts.load("current", {packages: ["timeline"]});
Der Klassenname der Visualisierung lautet google.visualization.Timeline:
var visualization = new google.visualization.Timeline(container);
Datenformat
Zeilen:Jede Zeile in der Tabelle stellt eine Zeitachse dar.
Columns:
| Spalte 0 | Spalte 1 | Spalte 2 | Spalte 3 | Spalte 4 | |
|---|---|---|---|---|---|
| Zweck: | Label für Zeile | Balkenlabel (optional) | Kurzinfo (optional) | Starten | Beenden |
| Datentyp: | String | String | String | Zahl oder Datum | Zahl oder Datum |
| Rolle: | Daten | Daten | Kurzinfo | Daten | Daten |
Konfigurationsoptionen
| Name | |
|---|---|
| alternatingRowStyle |
Gibt an, ob das Diagramm die Hintergrundfarbe nach Zeilenindex wechseln soll (d.h., die Hintergrundfarbe gerader indexierter Zeilen wird in einem dunkleren Farbton dargestellt). Bei „false“ hat der Diagrammhintergrund eine einheitliche Farbe. Bei „true“ wird der Diagrammhintergrund abwechselnd nach Zeilenindex gefärbt. (Hinweis: aktiv ab Version 51) Typ: Boolesch
Standardeinstellung:true
|
| avoidOverlappingGridLines |
Legt fest, ob Anzeigeelemente (z.B. die Balken in einer Zeitachse) die Rasterlinien verdecken sollen. Ist sie auf „false“ gesetzt, werden die Rasterlinien möglicherweise vollständig von Anzeigeelementen verdeckt. Falls wahr, können Anzeigeelemente so geändert werden, dass die Rasterlinien sichtbar bleiben. Typ: Boolesch
Standardeinstellung:true
|
| backgroundColor |
Die Hintergrundfarbe für den Hauptbereich des Diagramms. Dies kann entweder ein einfacher HTML-Farbstring wie Typ:String oder Objekt
Standard: 'white'
|
| Farben |
Die Farben, die für die Diagrammelemente verwendet werden sollen. Ein Array mit Strings, wobei jedes Element ein HTML-Farbstring ist. Beispiel: Typ:String-Array
Standard:Standardfarben
|
| enableInteractivity |
Gibt an, ob im Diagramm nutzerbasierte Ereignisse ausgelöst oder auf Nutzerinteraktionen reagiert werden Bei „false“ gibt das Diagramm keine „select“- oder anderen interaktionsbasierten Ereignisse aus (aber wir werden Bereit- oder Fehlerereignisse auslösen) und kein Hovertext anzeigen und sich je nach Nutzereingabe nicht anderweitig ändern. Typ: Boolesch
Standardeinstellung:true
|
| fontName |
Die Standardschriftart für den gesamten Text im Diagramm. Sie können dies mithilfe von Properties für bestimmte Diagrammelemente überschreiben. Typ: String
Standardeinstellung: 'Arial'
|
| fontSize |
Die Standardschriftgröße des gesamten Textes im Diagramm in Pixeln. Sie können dies mithilfe von Properties für bestimmte Diagrammelemente überschreiben. Typ:Zahl
Standard:automatisch
|
| forceIFrame |
Zeichnet das Diagramm in einem Inline-Frame. (Beachten Sie, dass diese Option in IE8 ignoriert wird; alle IE8-Diagramme werden in iFrames gezeichnet.) Typ: Boolesch
Standard: false
|
| height |
Höhe des Diagramms in Pixeln Typ:Zahl
Standard:Höhe des beinhaltenden Elements
|
| timeline.barLabelStyle |
Ein Objekt, das den Textstil für Balkenlabel angibt. Sie hat folgendes Format: {fontName: <string>, fontSize: <string>}
Siehe auch Typ:Objekt
Standard:null
|
| timeline.colorByRowLabel |
Wenn der Wert auf „true“ gesetzt ist, wird jeder Balken in der Zeile in derselben Farbe angezeigt. Standardmäßig wird eine Farbe pro Balkenlabel verwendet. Typ: Boolesch
Standard: false
|
| timeline.groupByRowLabel |
Wenn die Richtlinie auf „false“ gesetzt ist, wird eine Zeile für jeden Typ: Boolesch
Standardeinstellung:true
|
| timeline.rowLabelStyle |
Ein Objekt, das den Textstil für das Zeilenlabel angibt. Sie hat folgendes Format: {color: <string>, fontName: <string>, fontSize: <string>}
Typ:Objekt
Standard:null
|
| timeline.showBarLabels |
Wenn dieser Wert auf „false“ gesetzt ist, werden Balkenlabels weggelassen. Standardmäßig werden sie angezeigt. Typ: Boolesch
Standardeinstellung:true
|
| timeline.showRowLabels |
Wenn dieser Wert auf „false“ gesetzt ist, werden Zeilenlabels weggelassen. Standardmäßig werden sie angezeigt. Typ: Boolesch
Standardeinstellung:true
|
| timeline.singleColor |
Färbt alle Balken gleich ein. Wird als Hexadezimalwert angegeben (z.B. '#8d8'). Typ: String
Standard:null
|
| tooltip.isHtml |
Legen Sie Hinweis: Die Anpassung des HTML-Kurzinfoinhalts über die Spalte „Kurzinfo-Spaltendaten“ wird von der Visualisierung Blasendiagramm nicht unterstützt. Typ: Boolesch
Standardeinstellung:true
|
| tooltip.trigger |
Die Nutzerinteraktion, durch die die Kurzinfo angezeigt wird:
Typ: String
Standard: „Fokus“
|
| width |
Breite des Diagramms in Pixeln. Typ:Zahl
Standard:Breite des beinhaltenden Elements
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet das Diagramm. Das Diagramm akzeptiert erst dann weitere Methodenaufrufe, nachdem das Ereignis Return Type: Kein
|
clearChart() |
Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei. Return Type: Kein
|
getSelection() |
Gibt ein Array der ausgewählten Diagrammentitäten zurück.
Auswählbare Elemente sind Balken, Legendeneinträge und Kategorien.
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Rückgabetyp:Array von Auswahlelementen
|
Ereignisse
| Name | |
|---|---|
error |
Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt. Properties (Eigenschaften): id, message, message
|
onmouseover |
Wird ausgelöst, wenn der Nutzer den Mauszeiger auf eine visuelle Entität bewegt. Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Balken entspricht einer Zelle in der Datentabelle, ein Legendeneintrag zu einer Spalte (Zeilenindex ist null) und eine Kategorie zu einer Zeile (Spaltenindex ist null). Eigenschaften: Zeile, Spalte
|
onmouseout |
Wird ausgelöst, wenn der Nutzer den Mauszeiger von einer visuellen Entität entfernt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Balken entspricht einer Zelle in der Datentabelle, ein Legendeneintrag zu einer Spalte (Zeilenindex ist null) und eine Kategorie zu einer Zeile (Spaltenindex ist null). Eigenschaften: Zeile, Spalte
|
ready |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Properties:keine
|
select |
Wird ausgelöst, wenn der Nutzer auf eine visuelle Entität klickt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie Properties:keine
|
Datenrichtlinie
Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.