Erstellen eines Links von einem Google Chart-Zeitachsenelement

zuerst das Datenformat für das Zeitachsendiagramm gibt Folgendes an:

Um nicht standardmäßige QuickInfos bereitzustellen,
muss jede Zeile Ihrer Datentabelle alle fünf Spalten haben
(Zeilenbeschriftung, Balkenbeschriftung, QuickInfo, Start und Ende)
mit der QuickInfo-Spalte als dritte Spalte.
siehe Tooltips anpassen ...

Die einzige Option zum Auslösen des Tooltips ist jedoch 'focus' .
Dies führt dazu, dass der Tooltip verschwindet, wenn die Maus das Element verlässt.
Der Benutzer kann nicht auf den Link klicken.
Andere Diagramme haben eine 'selection' Auslöser, der den Tooltip fixiert.

siehe folgendes funktionierendes Snippet für ein Beispiel...

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var chart1 = new google.visualization.Timeline(document.getElementById('example3'));
  var data1 = new google.visualization.DataTable();

  data1.addColumn({ type: 'string', id: 'fracao' });
  data1.addColumn({ type: 'string', id: 'contrato' });
  data1.addColumn({ type: 'string', role: 'tooltip', id: 'link', 'p': {'html': true} });
  data1.addColumn({ type: 'date', id: 'Start' });
  data1.addColumn({ type: 'date', id: 'End' });
  data1.addRows([
    ['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=35">Serra Lopes, Cortes Martins & Associados</a>', new Date(2018, 5, 01), new Date(2019, 4, 31)],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=1">Serra Lopes, Cortes Martins & Associados</a>', new Date(2007, 2, 01), new Date(2013, 4, 31)],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=34">Serra Lopes, Cortes Martins & Associados</a>', new Date(2017, 5, 01), new Date(2018, 4, 31)]
  ]);

  var options1 = {
    chartArea: {
      left: 40,
      width: '100%',
    },
    timeline: {
      groupByRowLabel: true,
      singleColor: 'green' ,
      showRowLabels: true
    },
    tooltip: {
      isHtml: true
    },
    width: '100%',
    height: 600,
  };

  function drawChart1() {
    chart1.draw(data1, options1);
  }
  drawChart1();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example3"></div>

empfehlen Sie stattdessen die Verwendung von 'select' Ereignis, um die Website zu öffnen.
Wenn ein Benutzer ein Element auswählt, öffnen Sie die Website.
Um den Link in der Datentabelle zu speichern,
fügen Sie die Spalte als letzte Spalte hinzu,
die Timeline wird es also ignorieren.

siehe folgendes funktionierendes Snippet...

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var chart1 = new google.visualization.Timeline(document.getElementById('example3'));
  var data1 = new google.visualization.DataTable();

  data1.addColumn({ type: 'string', id: 'fracao' });
  data1.addColumn({ type: 'string', id: 'contrato' });
  data1.addColumn({ type: 'date', id: 'Start' });
  data1.addColumn({ type: 'date', id: 'End' });
  data1.addColumn({ type: 'string', role: 'tooltip', id: 'link', 'p': {'html': true} });
  data1.addRows([
    ['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2018, 5, 01), new Date(2019, 4, 31), 'detalhe_fraccao.php?id=35'],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2007, 2, 01), new Date(2013, 4, 31), 'detalhe_fraccao.php?id=35'],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2017, 5, 01), new Date(2018, 4, 31), 'detalhe_fraccao.php?id=35']
  ]);

  var options1 = {
    chartArea: {
      left: 40,
      width: '100%',
    },
    timeline: {
      groupByRowLabel: true,
      singleColor: 'green' ,
      showRowLabels: true
    },
    width: '100%',
    height: 600,
  };

  google.visualization.events.addListener(chart1, 'select', function () {
    var selection = chart1.getSelection();
    if (selection.length > 0) {
      window.open(data1.getValue(selection[0].row, 4), '_blank');
      console.log(data1.getValue(selection[0].row, 4));
    }
  });

  function drawChart1() {
    chart1.draw(data1, options1);
  }
  drawChart1();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example3"></div>

Hinweis:Der Link öffnet sich nicht über das obige Snippet,
aber sollte von Ihrer eigenen Seite aus problemlos funktionieren...