從Google可視化數據表獲取點擊價值

Question

在這里，我有一個Google vizualisation數據表。 我需要從表行獲取值。

代碼： http ： //jsfiddle.net/AVHY8/11/

我目前寫：

 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函數內部，因此事件處理程序無法訪問它。 如果將其放在全局范圍內（或放在包含事件處理程序的閉包中），它將正常工作。

編輯：啊哈，選擇的索引引用當前的數據表，由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”前面的數字是您要獲取的列值。