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

Question

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

Answer 1

您可以使用'select'event，来确定选择的值

当'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，你就可以在DataTable上使用getValue
dataTable.getValue(selection[0].row, 0)

getValue 接受两个参数，rowIndex 和 columnIndex

使用0获取第一列的值

请参阅以下工作 sn-p...

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

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

编辑

捕捉行上任意位置的点击，在彩色条之外，
使用'ready' 事件查找svg 元素并添加监听器

元素的x 属性为零 (0)
和fill 属性，而不是'none'

由于元素的数量将与行数匹配，
我们可以使用元素的索引，在它的对等点中，找到值

请参阅以下工作 sn-p，
'select' 和 'click' 事件都用于查找点击的值

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

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