从google图表时间线项目创建链接

hwamh0ep  于 2021-06-17  发布在  Mysql
关注(0)|答案(2)|浏览(305)

我有一个非常复杂的时间表和很多项目。
我试图直接从时间线为合同细节创建一个链接,这样当用户单击元素时,就可以选择跟随该链接。到目前为止,我的情况是:

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

有人有线索吗?

fslejnso

fslejnso1#

首先,时间线图表的数据格式指定:
为了提供非默认工具提示,
datatable的每一行都必须有五列
(行标签、栏标签、工具提示、开始和结束)
工具提示列作为第三列。
请参见自定义工具提示。。。
但是,触发工具提示的唯一选项是 'focus' .
当鼠标离开元素时,这将导致工具提示消失。
用户将无法单击该链接。
其他图表有一个 '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' 打开网站的事件。
当用户选择某个元素时,请打开该站点。
要在数据表中存储链接,
添加列作为最后一列,
所以时间线会忽略它。
请参阅以下工作片段。。。

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>

注意:链接不会从上面的代码段打开,
但是从你自己的页面上看应该可以很好的工作。。。

wwwo4jvm

wwwo4jvm2#

除了@whitehat solution刚刚添加了一个确认对话框外:(还将link列改为5而不是4)!

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一直以来对我们的支持!

相关问题