从Google Chart时间线项目创建链接 [英] Creating a link from Google Chart timeline item

问题描述

我的时间表很复杂，里面有很多东西.

I have quite complex timeline with lots of items.

我正在尝试直接从时间轴为合同明细创建一个链接，以便用户单击该元素时可以选择跟随该链接. 这是我到目前为止所拥有的:

I'm trying to create a link for the contract details straight from the timeline, so that when the user clicks the element it has the option to follow the link. This is what i have so far:

    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();

有人知道吗?

推荐答案

首先，时间轴图表的数据格式指定:

为了提供非默认工具提示，
数据表的每一行都必须具有全部五列
(行标签，条形标签，工具提示，开始和结束)
工具提示列为第三列.
参见自定义工具提示 ...

in order to provide non-default tooltips,
every row of your datatable must have all five columns
(row label, bar label, tooltip, start, and end)
with the tooltip column as the third column.
see customizing tooltips...

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

however, the only option to trigger the tooltip is 'focus'.
this will cause the tooltip to disappear when the mouse leaves the element.
the user will not be able to click the link.
other chart's have a 'selection' trigger, which locks the tooltip in place.

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

see following working snippet for an example...

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'事件打开网站.
当用户选择元素时，请打开网站.
将链接存储在数据表中，
将列添加为最后一列，
因此时间轴将忽略它.

instead, recommend using the 'select' event to open the site.
when a user select's an element, open the site.
to store the link in the data table,
add the column as the last column,
so the timeline will ignore it.

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

see following working 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>

注意:上面的代码段不会打开该链接，
但应该可以在您自己的页面上正常工作...

note: the link won't open from the above snippet,
but should work fine from your own page...

这篇关于从Google Chart时间线项目创建链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！