从 Google 图表时间线项目创建 link

Question

我的时间表很复杂，有很多项目。

我正在尝试直接从时间轴为合同详细信息创建 link，这样当用户单击该元素时，它可以选择跟随 link。这是我目前所拥有的：

    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:'cliente', 'p': {'html': true} });
  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), 'Serra Lopes, Cortes Martins & Associados', '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), 'Serra Lopes, Cortes Martins & Associados', 'detalhe_fraccao.php?id= 1'],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2017, 5, 01), new Date(2018, 4, 31), 'Serra Lopes, Cortes Martins & Associados', 'detalhe_fraccao.php?id= 34']
  ]);


  var options1 = {
    chartArea: {
      left: 40,
      width: '100%',

    },
    timeline: {
      groupByRowLabel: true,
      singleColor: 'green' ,
     showRowLabels: true },
     width: '100%',
     height: 600,

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

有人知道吗？

Answer 1

首先，时间轴图表的 data format 指定：

为了提供非默认工具提示，
数据的每一行table 必须包含全部五列
（行标签、栏标签、工具提示、开始和结束）
工具提示列作为第三列。
见 customizing tooltips...

但是，触发工具提示的唯一选项是 'focus'。
这将导致工具提示在鼠标离开元素时消失。
用户将无法单击 link.
其他图表有一个 'selection' 触发器，可将工具提示锁定到位。

有关示例，请参见以下工作片段...

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>

相反，建议使用 'select' 事件打开网站。
当用户 select 的元素时，打开网站。
将 link 存储在数据 table、
中将列添加为最后一列，
所以时间线会忽略它。

请参阅以下工作片段...

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>

注意：link 不会从上面的代码片段中打开，
但在您自己的页面上应该可以正常工作...

Answer 2

除了@whitehat 解决方案刚刚添加了一个确认对话框：（还将 link 列从 4 改为 5）！

google.visualization.events.addListener(chart1, 'select', function () {
    var selection = chart1.getSelection();
    if (selection.length > 0) {
      window.confirm("Deseja consultar este contrato?");
      window.open(data1.getValue(selection[0].row, 5), '_blank');
      console.log(data1.getValue(selection[0].row, 5));
    }
  });

感谢@Whitehat 一直以来的帮助支持！

从 Google 图表时间线项目创建 link

Creating a link from Google Chart timeline item

php

mysql

google-visualization

interactive

timeline