Tạo liên kết từ mục dòng thời gian của Google Chart

đầu tiên, định dạng dữ liệu đối với biểu đồ Dòng thời gian chỉ định:

để cung cấp chú giải công cụ không phải mặc định,
mỗi hàng trong định dạng dữ liệu của bạn phải có tất cả năm cột
(nhãn hàng, nhãn thanh, chú giải công cụ, bắt đầu và kết thúc)
với cột chú giải công cụ là cột thứ ba.
xem tùy chỉnh chú giải công cụ ...

tuy nhiên, tùy chọn duy nhất để kích hoạt chú giải công cụ là 'focus' .
điều này sẽ khiến chú giải công cụ biến mất khi chuột rời khỏi phần tử.
người dùng sẽ không thể nhấp vào liên kết.
biểu đồ khác có 'lựa chọn' kích hoạt, khóa chú giải công cụ tại chỗ.

 
 xem đoạn mã làm việc sau để biết ví dụ ... 
 
 
 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>
 
 thay vào đó, khuyên bạn nên sử dụng  'select'  sự kiện để mở trang web. 
 khi người dùng chọn là một phần tử, hãy mở trang web. 
 để lưu trữ liên kết trong bảng dữ liệu, 
 thêm cột làm cột cuối cùng, 
 vì vậy dòng thời gian sẽ bỏ qua nó. 
 
 xem đoạn mã hoạt động sau ... 
 
 
 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>
 
 lưu ý:liên kết sẽ không mở từ đoạn mã trên, 
 nhưng sẽ hoạt động tốt từ trang của chính bạn ...