谷歌图表时间线-在行鼠标单击上获取文本

Question

我想在鼠标单击行/svg 图像上的任意位置时取出“文本值”，例如，在下图中，如果我单击第二个蓝色突出显示的行上的任意位置，那么我应该能够获取文本“Adams”，如下所示警报。我尝试迭代 svg 元素，但 svg 元素是水平创建的，而不是垂直创建的

Answer 1

您可以使用'select' 事件, 来确定所选的值

当'select'事件触发时，检查chart.getSelection()

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

getSelection返回所选行的数组，
时间轴图表一次只允许选择一行，
因此选择将始终位于第一个元素中
chart.getSelection()[0]

数组中的每个元素都具有row和 的属性column
（column始终适用null于时间轴图表）

一旦你有了，你就可以在数据表上row使用getValue
dataTable.getValue(selection[0].row, 0)

getValue有两个参数，rowIndex并且columnIndex

用于0获取第一列的值

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

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

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'President' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);

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

    chart.draw(dataTable);
  },
  packages: ['timeline']
});

编辑

要捕获行上彩色条之外任意位置的单击，
请使用该'ready'事件查找 svg 元素并添加侦听器

这些元素将具有x零 ( 0)属性
和fill除'none'

由于元素数将与行数匹配，因此
我们可以使用元素在其同级中的索引来查找值

请参阅以下工作片段，和事件
均用于查找单击的值 'select''click'

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

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'President' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);

    var saveRows = [];
    google.visualization.events.addListener(chart, 'ready', function () {
      chartRows = container.getElementsByTagName('rect');
      Array.prototype.forEach.call(chartRows, function(row) {
        if ((parseInt(row.getAttribute('x')) === 0) && (row.getAttribute('fill') !== 'none')) {
          saveRows.push(row);
          row.addEventListener('click', function (e) {
            for (var i = 0; i < saveRows.length; i++) {
              if (e.target === saveRows[i]) {
                getRowLabel(i);
                break;
              }
            }
          }, false);
        }
      });
    });

    google.visualization.events.addListener(chart, 'select', function () {
      selection = chart.getSelection();
      if (selection.length > 0) {
        getRowLabel(selection[0].row);
      }
    });

    function getRowLabel(index) {
      console.log(dataTable.getValue(index, 0));
    }

    chart.draw(dataTable);
  },
  packages: ['timeline']
});