javascript - google charts timeline - 鼠标单击获取行上的文本

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]

数组中的每个元素都有行和列
的属性 (对于时间轴图表，列 将始终为 null)

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

getValue 有两个参数，rowIndex 和 columnIndex

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

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

编辑

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

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

因为元素的数量将匹配行的数量，
我们可以使用元素的索引，在其对等元素中找到值

请参阅以下工作片段，
'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>