Временная диаграмма Google делает первый столбец кликабельным - PullRequest
Новая
       34

Временная диаграмма Google делает первый столбец кликабельным

1 голос
/ 15 февраля 2020

Я использую график времени Google. Можно ли сделать первый столбец кликабельным, сделав его html?

. Я пытаюсь сделать столбец (Имя пользователя) разрешающим html, чтобы при попытке добавить строку я можно сделать как ссылку, как это <a href="http://www.google.com">Google</a>

dataTable.addColumn({type: 'string', id: 'User Name', p: {html: true}});
dataTable.addColumn({type: 'string', id: 'User Id'});
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
dataTable.addColumn({type: 'string', id: 'style', role: 'style'});
dataTable.addColumn({type: 'date', id: 'Start'});
dataTable.addColumn({type: 'date', id: 'End'});

Но, похоже, это не работает, оно отображается как простой текст.

1 Ответ

1 голос
/ 15 февраля 2020

нет никаких кликов событий , предоставленных диаграммой,
, но мы можем добавить обычные события, используя javascript / jquery.

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

google.visualization.events.addListener(chart, 'ready', function () {
  $(chart.getContainer()).find('text[text-anchor="end"]').on('click', onLabelClick);
});

здесь мы используем фильтр элементов <text> [text-anchor="end"]
, чтобы назначать событие только меткам строк, а не меткам оси x.

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

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'User Name'});
  dataTable.addColumn({type: 'string', id: 'User Id'});
  dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
  dataTable.addColumn({type: 'string', id: 'style', role: 'style'});
  dataTable.addColumn({type: 'date', id: 'Start'});
  dataTable.addColumn({type: 'date', id: 'End'});
  dataTable.addRows([
    [{v: 'User A', p: {url: 'https://www.google.com'}}, '1', null, 'cyan', new Date(2020, 0, 1), new Date(2020, 0, 31)],
    [{v: 'User B', p: {url: 'https://www.yahoo.com'}}, '2', null, 'magenta', new Date(2020, 1, 1), new Date(2020, 1, 14)],
    [{v: 'User C', p: {url: 'https://www.bing.com'}}, '3', null, 'lime', new Date(2020, 2, 1), new Date(2020, 2, 10)]
  ]);

  google.visualization.events.addListener(chart, 'ready', function () {
    $(chart.getContainer()).find('text[text-anchor="end"]').on('click', onLabelClick);
  });

  chart.draw(dataTable);

  function onLabelClick(sender) {
    var label = $(sender.target).text();
    var rowIndex = dataTable.getFilteredRows([{
      column: 0,
      value: label
    }])[0];
    var url = dataTable.getProperty(rowIndex, 0, 'url');
    console.log(label, url);
    // window.open(url, '_blank');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height: 180px;"></div>
...