谷歌图表时间轴-获取行鼠标单击文本 [英] google charts timeline - get text on row mouse click

问题描述

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

i want to take out 'text value' on mouse click on anywhere on the row/svg image ,for i.e. in the below image if i click anywhere on 2nd blue highlighted row, then i should be able to get the text 'Adams' as alert. I tried to iterate thru svg elements but svg elements are created horizontally rather then vertically

推荐答案

，您可以使用'select'

you can use the 'select' event, to determine the value selected

当'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
的属性(时间轴图表的列始终为 null )

each element in the array will have properties for row and column
(column will always be null for a Timeline chart)

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

once you have the row, you can use getValue on the DataTable
dataTable.getValue(selection[0].row, 0)

getValue 带有两个参数， rowIndex 和 columnIndex

使用 0 获取第一列的值

请参阅以下工作摘要...

see following working snippet...

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元素并添加侦听器

to capture the click anywhere on the row, outside the colored bar,
use the 'ready' event to find the svg elements and add a listener

元素的 x 属性的值为零( 0 )
以及除'none'

the elements will have an x attribute of zero (0)
and a fill attribute other than 'none'

因为元素数将与行数匹配，
我们可以使用元素的索引(在其对等元素之间)来找到值

since the number of elements will match the number of rows,
we can use the index of the element, amongst its peers, to find the value

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

see following working snippet,
both the 'select' and 'click' events are used to find the value clicked

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>

这篇关于谷歌图表时间轴-获取行鼠标单击文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！