Zeitverläufe

Übersicht

Eine Zeitachse ist ein Diagramm, das darstellt, wie eine Gruppe von Ressourcen im Zeitverlauf verwendet wird. Wenn Sie ein Softwareprojekt verwalten und veranschaulichen möchten, wer was wann macht, oder wenn Sie eine Konferenz organisieren und Konferenzräume planen möchten, ist ein Zeitplan häufig eine vernünftige Wahl. Eine beliebte Zeitachse ist das Gantt-Diagramm.

Hinweis:In JavaScript-Datumsobjekten werden Monate ab null indexiert und elf hochgeklappt. Der Januar ist dann der Monat 0 und der Dezember der Monat 11. Wenn deine Zeitachse um einen Monat abweicht, ist dies höchstwahrscheinlich der Grund dafür. Weitere Informationen finden Sie auf der Seite Datums- und Uhrzeitangaben.

Ein einfaches Beispiel

Angenommen, Sie möchten grafisch darstellen, wann die Präsidenten der USA ihre Amtszeit ausgeübt haben. Hier sind die „Ressourcen“ die Präsidenten und wir können die Begriffe der einzelnen Präsidenten als Balken darstellen:

Wenn Sie den Mauszeiger auf einen Balken bewegen, erscheint eine Kurzinfo mit weiteren Informationen.

Nachdem das timeline-Paket geladen und ein Callback zum Zeichnen des Diagramms beim Rendern der Seite definiert wurde, instanziiert die drawChart()-Methode eine google.visualization.Timeline() und füllt dann eine dataTable mit einer Zeile für jeden Präsidenten aus.

Innerhalb von dataTable ist die erste Spalte der Name des Präsidenten, die zweite und dritte Spalte die Start- und Endzeiten. Sie haben den JavaScript-Typ Date, können aber auch einfache Zahlen sein.

Schließlich rufen Sie die Methode draw() des Diagramms auf, die es in einem div mit derselben Kennung (timeline) anzeigt, die verwendet wurde, als container in der ersten Zeile von drawChart() deklariert 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>

Google Charts-Zeitachsen sind anpassbar. In den folgenden Beispielen sehen Sie einige gängige Möglichkeiten, wie Sie die Darstellung Ihrer Zeitachsen anpassen können.

Beschriftung der Balken

Zusätzlich zu den Zeilenlabels (z. B. „Washington“, „Adams“ und „Jefferson“) können Sie einzelne Balken kennzeichnen. Hier ändern wir die Zeilenbezeichnungen in einfache Zahlen und setzen den Namen jedes Präsidenten auf seinen Balken.

In diesem Code haben wir eine neue Spalte in unsere Daten eingefügt, die die Balkenlabels enthält: den vollständigen Namen jedes Präsidenten. Wenn die Zeitachse dataTable vier Spalten enthält, wird die erste als Zeilenlabel, die zweite als Balkenlabel und die dritte und vierte als Start- und Enddatum 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 oben aufgeführten neuen Zeilenlabels sind nicht sehr informativ. Entfernen wir sie daher mit der Zeitachse showRowLabels.

Standardmäßig ist showRowLabels true. Wenn Sie dafür 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>

Ein erweitertes Beispiel

Um die Zeitachse komplexer zu gestalten, fügen wir dem Diagramm Vizepräsidenten und Außenminister hinzu. John Adams war Vizepräsident, bevor er Präsident war, und Thomas Jefferson war Secretary of State, dann Vizepräsident und schließlich Präsident.

In Zeitachsen hat eine Ressource dieselbe Farbe, auch wenn sie in mehreren Zeilen erscheint. Im folgenden Diagramm wird daher jede Person durch eine einheitliche Farbe dargestellt.

Einige Staatssekretäre waren nur sehr kurz tätig. Dieses Diagramm eignet sich also gut für das Labeling. Wenn ein Label zu groß für den Balken ist, wird es je nach Größe des Balkens abgekürzt oder entfernt. Nutzer können den Mauszeiger jederzeit auf die Leiste bewegen, um Kurzinfo-Informationen zu erhalten.

In der Zeitachse werden die Zeilen in der richtigen Reihenfolge angeordnet – neben dem Vizepräsidenten und dem Staatssekretär –, wie im Code unten dargestellt. Das Layout der Balken wird jedoch ausschließlich durch die Start- und Endzeiten festgelegt. Wenn Sie also zwei Sekretäre oder zwei Präsidenten in dataTable austauschen, hat das keine Auswirkungen auf das Diagramm.

<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 in einer Zeile

Im Gegensatz zu Papst kann es nur einen US-Präsidenten geben. Wenn wir also alle Zeilen als „Präsident“ kennzeichnen, werden die drei Zeilen des ersten Diagramms auf der Zeitachse zu einer übersichtlicheren Präsentation zusammengefasst. Sie können dieses Verhalten mit der Option groupByRowLabel steuern.

Standardverhalten:

Legen Sie groupByRowLabel auf false fest und teilen Sie die eine Zeile in drei 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 steuern

Google Charts wählt standardmäßig Farben aus, die für die Ästhetik und Lesbarkeit optimiert sind (einschließlich Nutzer mit Sehbehinderung). Sie können das Standardverhalten mit den Optionen colorByRowLabel, singleColor, backgroundColor und colors anpassen.

Mit der Option colorByRowLabel werden alle Balken in derselben Zeile farblich gekennzeichnet. Das ist eine gute Wahl, wenn es Lücken zwischen den Balken gibt.

colorByRowLabel ist standardmäßig auf false gesetzt. Hier wird dies überschrieben und auf true festgelegt.

<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 Sie möchten, dass alle Balken dieselbe Farbe haben, unabhängig davon, in welcher Zeile sie sich befinden, verwenden Sie die Option singleColor:

Im folgenden Code ist singleColor auf einen Hexadezimalwert gesetzt, um alle Balken hellgrün darzustellen:

<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 steuern:

backgroundColor wird als Hexadezimalwert angegeben. Hier wird es mit colorByRowLabel kombiniert, 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 v51), um die Hintergrundfarbe auf alternierenden oder nicht alternierenden Zeilenindex festzulegen.

<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:

colors verwendet ein Array von Hexadezimalwerten, 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 angegeben, verhält sich das Diagramm so, als wäre singleColor auf die erste Farbe in der Liste festgelegt. Dies gilt für alle Google Charts, nicht nur für Zeitachsen.

Eine weitere Möglichkeit zur Steuerung der Farben einzelner Balken ist die Verwendung einer Spalte mit der Stilrolle.

So fügen Sie eine Stilspalte hinzu und füllen sie:

<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 Schriftart und Schriftart für die Labels der einzelnen Zeilen mit rowLabelStyle und für die Labels auf jedem Balken mit barLabelStyle auswählen. Beide Methoden werden im Folgenden beschrieben.

Hinweis: Wählen Sie Schriftarten aus, die die Browser Ihrer Nutzer rendern 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.

Sich überschneidende Gitternetzlinien

In Google Charts werden kleine Anpassungen an Balkendiagramm-Endpunkten vorgenommen, um Zeitachsenraster zu vermeiden. Wenn Sie dieses Verhalten verhindern möchten, legen Sie die Option avoidOverlappingGridLines auf false fest.

Hier sind zwei Beispiele, um den Effekt zu veranschaulichen: das erste mit einem überlappenden Gitternetz und das zweite ohne.

Der folgende Code überschneidet die Gitternetzlinien:

  <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, indem Sie eine Kurzinfo-Spalte in eine fünfspaltige Datentabelle einfügen. Wenn Sie nicht standardmäßige Kurzinfos angeben möchten, muss jede Zeile der Datentabelle alle fünf Spalten enthalten (Zeilenlabel, Balkenlabel, Kurzinfo, Anfang 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 müssen Sie Dummy-Werte in der zweiten Spalte (hier null) festlegen, 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 entspricht einer Zeitachse.

Columns:

  Spalte 0 Spalte 1 Spalte 2 Spalte 3 Spalte 4
Zweck: Label für Zeile Leistenlabel (optional) Kurzinfo (optional) Starten Ende
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 abwechseln soll (d.h. die Hintergrundfarbe von Zeilen aus indizierten Zeilen wird in einem dunkleren Farbton dargestellt). Bei „false“ ist der Diagrammhintergrund einheitlich. Wenn der Wert „true“ ist, wird der Diagrammhintergrund abwechselnd nach Zeilenindex gefärbt. (Hinweis: ab v51)

Typ: Boolesch
Standard: true
Überlappende Gitterlinien vermeiden

Gibt an, ob Anzeigeelemente (z.B. die Balken in einer Zeitachse) Rasterlinien verdecken sollen. Bei „false“ werden Rasterlinien möglicherweise vollständig von Anzeigeelementen verdeckt. Falls wahr, können Anzeigeelemente so geändert werden, dass die Rasterlinien sichtbar sind.

Typ: Boolesch
Standard: true
backgroundColor

Die Hintergrundfarbe für den Hauptbereich des Diagramms. Kann ein einfacher HTML-Farbstring sein, z. B. 'red' oder '#00cc00', oder ein Objekt mit den folgenden Eigenschaften.

Typ:String oder Objekt
Standard:Weiß
Farben

Die für die Diagrammelemente zu verwendenden Farben. Ein Array von Strings, wobei jedes Element ein HTML-Farbstring ist, zum Beispiel colors:['red','#004411'].

Typ:Stringarray
Standard: Standardfarben
interaktivität aktivieren

Gibt an, ob das Diagramm nutzerbasierte Ereignisse auslöst oder auf Nutzerinteraktionen reagiert. Bei „false“ wird im Diagramm kein „select“-Ereignis oder ein anderes interaktionsbasiertes Ereignis ausgelöst. Stattdessen werden Ready- oder Error-Ereignisse ausgelöst. Außerdem wird je nach Nutzereingabe kein Hover-Text angezeigt oder anderweitig geändert.

Typ: Boolesch
Standard: true
Schriftname

Die Standardschriftart für den gesamten Text im Diagramm. Sie können dies mit Attributen für bestimmte Diagrammelemente überschreiben.

Typ: String
Standardeinstellung: „MongoDB“
Schriftgröße

Die Standardschriftgröße des gesamten Textes im Diagramm in Pixeln. Sie können dies mit Attributen für bestimmte Diagrammelemente überschreiben.

Typ:Zahl
Standard: automatisch
forceIFrame

Zeichnet das Diagramm innerhalb eines Inline-Frames. Beachten Sie, dass diese Option im 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
Zeitachse.barLabelStyle

Ein Objekt, das den Textstil des Balkenlabels angibt. Sie hat folgendes Format:

{fontName: <string>, fontSize: <string>}

Weitere Informationen finden Sie unter fontName und fontSize in dieser Tabelle.

Type: Objekt
Standard: null
Zeitachse.FarbeNachZeileLabel

Bei der Einstellung „true“ erhält jeder Balken in der Zeile dieselbe Farbe. Standardmäßig wird eine Farbe pro Balkenlabel verwendet.

Typ: Boolesch
Standard: false
„Timeline.groupByRowLabel“

Wenn dieser Wert auf „false“ gesetzt ist, wird eine Zeile für jeden dataTable-Eintrag erstellt. Standardmäßig werden Balken mit demselben Zeilenlabel in einer Zeile erfasst.

Typ: Boolesch
Standard: true
Zeitachse.ZeileLabelStyle

Ein Objekt, das den Textstil des Zeilenlabels angibt. Sie hat folgendes Format:

{color: <string>, fontName: <string>, fontSize: <string>}

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Weitere Informationen finden Sie in der Tabelle unter fontName und fontSize.

Type: Objekt
Standard: null
Zeitachse.BarBarLabels

Wird die Richtlinie auf „false“ gesetzt, werden Balkenlabels weggelassen. Standardmäßig werden sie angezeigt.

Typ: Boolesch
Standard: true
„Timeline.showRowLabels“

Wird die Richtlinie auf „false“ gesetzt, werden Zeilenlabels weggelassen. Standardmäßig werden sie angezeigt.

Typ: Boolesch
Standard: true
Zeitachse.Einzelfarbe

Alle Balken werden gleich dargestellt. Wird als Hexadezimalwert angegeben (z.B. „#8d8“).

Typ: String
Standard: null
tooltip.isHtml

Auf false gesetzt, um Kurzinfos zu verwenden, die über SVG gerendert werden (statt HTML-gerendert). Weitere Informationen finden Sie unter Kurzinfos anpassen.

Hinweis:Die Anpassung der HTML-Kurzinfos über die Datenrolle der Kurzinfo-Spalte wird von der Visualisierung des Blasendiagramms nicht unterstützt.

Typ: Boolesch
Standard: true
tooltip.Trigger

Die Nutzerinteraktion, die dazu führt, dass die Kurzinfo angezeigt wird:

  • „Fokus“: Die Kurzinfo wird angezeigt, wenn der Nutzer den Mauszeiger auf das Element bewegt.
  • „Keine“: Die Kurzinfo wird nicht angezeigt.
Typ: String
Standardeinstellung: „focus“
width

Breite des Diagramms in Pixeln.

Typ:Zahl
Standard:Breite des beinhaltenden Elements

Methoden

Methode
draw(data, options)

Zeichnet das Diagramm. Im Diagramm sind weitere Methodenaufrufe erst möglich, nachdem das Ereignis ready ausgelöst wurde. Extended description

Rückgabetyp: Keine
clearChart()

Löscht das Diagramm und gibt alle zugehörigen Ressourcen frei.

Rückgabetyp: Keine
getSelection()

Gibt ein Array der ausgewählten Diagrammentitäten zurück. Auswählbare Elemente sind Balken, Einträge in Legenden und Kategorien. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description.

Rückgabetyp: Array von Auswahlelementen

Ereignisse

Name
error

Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt

Eigenschaften: ID, Nachricht
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, einem Legendeneintrag für eine Spalte (Zeilenindex ist null) und einer Kategorie einer Zeile (Spaltenindex ist null).

Attribute:Zeile, Spalte
onmouseout

Wird ausgelöst, wenn der Nutzer die Maus von einer visuellen Entität wegbewegt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Balken entspricht einer Zelle in der Datentabelle, einem Legendeneintrag für eine Spalte (Zeilenindex ist null) und einer Kategorie einer Zeile (Spaltenindex ist null).

Attribute: Zeile, Spalte
ready

Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Sie sollten sie erst aufrufen, nachdem das Ereignis ausgelöst wurde.

Eigenschaften:Keine
select

Wird ausgelöst, wenn der Nutzer auf ein visuelles Element klickt. Rufen Sie getSelection() auf, um zu erfahren, was ausgewählt wurde.

Eigenschaften:Keine

Datenrichtlinie

Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.