Question

这里我有一个Google vizualisation数据表。我需要从表格行中获取值。

我目前写道：

 new google.visualization.events.addListener(table, 'ready', function () {
        google.visualization.events.addListener(table.getChart(), 'select', function () {
            var selection = table.getChart().getSelection();
            // iterate over all selected rows
            for (var i = 0; i < selection.length; i++) {
                alert(selection[i].row);
            }
        });
    });

所以现在当我点击行时我只得到行数...但我怎么能得到该行的值？

我尝试使用alert data.getValue[(selection[i].row)]; 但它不起作用？有什么想法吗？

更新

我也尝试使用此代码：

 // Add our selection handler.
google.visualization.events.addListener(table, 'select', selectHandler);

// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
  var selection = table.getSelection();
  var message = '';
  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      var str = data.getFormattedValue(item.row, item.column);
      message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
    } else if (item.row != null) {
      var str = data.getFormattedValue(item.row, 0);
      message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
    } else if (item.column != null) {
      var str = data.getFormattedValue(0, item.column);
      message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

它不再起作用了。

Answer 1

在您的JSFiddle中，data数组位于drawVisualization函数内，因此事件处理程序无权访问它。如果将它放在全局范围内（或包含事件处理程序的闭包中），它应该可以工作。

编辑： Aha，选择的索引是指当前的数据表，它由ControlWrapper改变。您可以做的不是data.getValue(..)做table.getDataTable().getValue(..)。

另请注意，您不会取消选择之前选择的行，从而导致一些混淆。

Answer 2

 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["table"]});
      google.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('number', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, 10],
          ['Jim',   {v:8000,   f: '$8,000'},  20],
          ['Alice', {v: 12500, f: '$12,500'}, 38],
          ['Bob',   {v: 7000,  f: '$7,000'},  20]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, { showRowNumber: true });

      
            $("#table_div table tbody tr td").click(function () {
                alert($(this).html());
            });
      
      }
    </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="table_div">
    </div>

Answer 3

您可以使用事件列表器来做到这一点。

google.visualization.events.addListener(table, 'select', function () {
    selectHandler(table);
});

function selectHandler(myTable) {
    var selectedItem = myTable.getSelection()[0];
    if (selectedItem) {
       console.log(data.getValue(selectedItem.row, 0))
    }
}

“ selectedItem.row”前面的数字是您要获取的列值。

从Google可视化数据表获取点击值

3 个答案: