如何在Google时间轴图表中雇用点击功能

Question

我正在使用 Google 时间轴图表，并且想要雇用点击功能。只需单击彩色矩形或文本时，我就希望显示引导程序模态。

google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
  [ 'Magnolia Room', 'Beginning JavaScript',       new Date(2017, 1, 30),  
new Date(2017, 2, 30) ],
  [ 'Learning for Life', 'Intermediate JavaScript',    new Date(2017, 3, 1),  
new Date(2017, 4, 30) ],
  [ 'Magnolia Room', 'Advanced JavaScript',        new Date(2017, 5, 01),  
new Date(2017, 6, 30) ],
  [ 'Willow Room',   'Beginning Google Charts',    new Date(2017, 1, 30), 
new Date(2017, 3, 30) ],
  [ 'Willow Room',   'Intermediate Google Charts', new Date(2017, 4, 30), 
new Date(2017, 5, 30) ],
  [ 'Willow Room',   'Advanced Google Charts',     new Date(2017, 6, 30), 
new Date(2018, 1, 30) ]]);

var options = {
timeline: { colorByRowLabel: true }
};

chart.draw(dataTable, options);
}

请看一下这个Fiddle

请帮忙。

Answer 1

时间线图表没有

'click'

事件

但它确实有

'select'

您可以使用选择的属性，
从数据表中提取信息

google.visualization.events.addListener(chart, 'select', function () {
  var selection = chart.getSelection();
  if (selection.length > 0) {
    console.log(dataTable.getValue(selection[0].row, 1));
  }
});

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

google.charts.load('current', {
  callback: drawChart,
  packages:['timeline']
});
function drawChart() {
  var container = document.getElementById('example5.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'Room'});
  dataTable.addColumn({type: 'string', id: 'Name'});
  dataTable.addColumn({type: 'date', id: 'Start'});
  dataTable.addColumn({type: 'date', id: 'End'});
  dataTable.addRows([
    ['Magnolia Room', 'Beginning JavaScript', new Date(2017, 1, 30), new Date(2017, 2, 30)],
    ['Learning for Life', 'Intermediate JavaScript', new Date(2017, 3, 1), new Date(2017, 4, 30)],
    ['Magnolia Room', 'Advanced JavaScript', new Date(2017, 5, 01), new Date(2017, 6, 30)],
    ['Willow Room', 'Beginning Google Charts', new Date(2017, 1, 30), new Date(2017, 3, 30)],
    ['Willow Room', 'Intermediate Google Charts', new Date(2017, 4, 30), new Date(2017, 5, 30)],
    ['Willow Room', 'Advanced Google Charts', new Date(2017, 6, 30), new Date(2018, 1, 30)]
  ]);

  var options = {
    timeline: {
      colorByRowLabel: true
    }
  };

  google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      console.log(dataTable.getValue(selection[0].row, 1));
    }
  });

  chart.draw(dataTable, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.1"></div>

编辑

在时间线图表上分配点击事件，
它似乎仅在将事件分配给图表时才起作用，
不是图表的容器。

他们一定是在取消事件传播，或者其他什么。

请参阅以下工作片段，
您可以选择仅将单击事件分配给特定元素，例如

<text>

元素，
或图表的整个

<svg>

元素

注意：在分配点击事件之前，您必须等待图表的

'ready'

事件。

google.charts.load('current', {
  callback: drawChart,
  packages:['timeline']
});
function drawChart() {
  var container = document.getElementById('example5.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'Room'});
  dataTable.addColumn({type: 'string', id: 'Name'});
  dataTable.addColumn({type: 'date', id: 'Start'});
  dataTable.addColumn({type: 'date', id: 'End'});
  dataTable.addRows([
    ['Magnolia Room', 'Beginning JavaScript', new Date(2017, 1, 30), new Date(2017, 2, 30)],
    ['Learning for Life', 'Intermediate JavaScript', new Date(2017, 3, 1), new Date(2017, 4, 30)],
    ['Magnolia Room', 'Advanced JavaScript', new Date(2017, 5, 01), new Date(2017, 6, 30)],
    ['Willow Room', 'Beginning Google Charts', new Date(2017, 1, 30), new Date(2017, 3, 30)],
    ['Willow Room', 'Intermediate Google Charts', new Date(2017, 4, 30), new Date(2017, 5, 30)],
    ['Willow Room', 'Advanced Google Charts', new Date(2017, 6, 30), new Date(2018, 1, 30)]
  ]);

  var options = {
    timeline: {
      colorByRowLabel: true
    }
  };

  // READY event
  google.visualization.events.addListener(chart, 'ready', function () {
  /*
    // assign event directly to <text> elements
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
      label.addEventListener('click', clickHandler);
    });
    
    or...
  */
  
    // assign event to chart <svg> element
    Array.prototype.forEach.call(container.getElementsByTagName('svg'), function (svg) {
      svg.addEventListener('click', clickHandler);
    });
  });
  
  // SELECT event
  google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      console.log(dataTable.getValue(selection[0].row, 1));
    }
  });

  function clickHandler(e) {
    console.log(e.target.tagName, e.target.textContent);
  }
  
  chart.draw(dataTable, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.1"></div>