Создание ссылки из элемента шкалы времени Google Chart - PullRequest
Новая
       37

Создание ссылки из элемента шкалы времени Google Chart

0 голосов
/ 13 декабря 2018

У меня довольно сложная временная шкала с большим количеством элементов.

Я пытаюсь создать ссылку на детали контракта прямо с временной шкалы, чтобы при щелчке по элементу пользователь имел возможность следоватьссылка.Вот что у меня есть: 

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

У кого-нибудь есть подсказка?

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

В дополнение к решению @whitehat просто добавлено диалоговое окно подтверждения: (также изменил столбец ссылок на 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 за вашу всегда полезную поддержку!

0 голосов
/ 13 декабря 2018

во-первых, формат данных для диаграммы Временной шкалы указывает:

, чтобы обеспечить всплывающие подсказки не по умолчанию,
каждая строка таблицы данных должна иметь все пять столбцов
(метка строки, метка строки, всплывающая подсказка, начало и конец)
со столбцом всплывающей подсказки в качестве третьего столбца.
см. настройка подсказок ...

однако,единственная опция для вызова всплывающей подсказки - '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>

примечание: ссылка не открывается из приведенного выше фрагмента,
, но должна нормально работать с вашей собственной страницы ...

...