如何在 Google 时间线图表中使用点击功能

Question

我正在使用 Google 时间线图表并想使用点击功能。只是当我点击彩色矩形或文本时，我想要一个 bootstrap Modal 出现。

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

请看看这个小提琴

请帮忙。

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.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);
}