访问谷歌可视化表中的某个单元格

Question

我正在使用google visualization table在表格中显示一些数据。我在表中添加了一个监听器来跟踪用户点击事件。

这样的一些代码：

// 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);
}

问题在于，监听器似乎只能检测它被点击的行，但不知道列信息。有人知道如何通过用户点击访问google visualization table中的特定单元格吗？还是其他一些我可以使用的更强大的js库？

Answer 1

对列索引没有基于API的访问权限，您必须使用DOM。

向def cutoff(x): ebola['Col3'] = (ebola['prob'] > x).astype(int) df = pd.crosstab(ebola.Col3,ebola.ebola).apply(lambda r: r/len(ebola),axis=1) return df.ix[1,0] 添加点击侦听器，当它触发时，使用父<table>

的子节点中<td>的索引来检测列索引

简单示例：

<tr>

google.setOnLoadCallback(drawTable);

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike', {
        v: 10000,
        f: '$10,000'
      },
      true
    ],
    ['Jim', {
        v: 8000,
        f: '$8,000'
      },
      false
    ],
    ['Alice', {
        v: 12500,
        f: '$12,500'
      },
      true
    ],
    ['Bob', {
        v: 7000,
        f: '$7,000'
      },
      true
    ]
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  google.visualization.events.addListener(table, 'ready', function() {
    document.querySelector('#table_div tbody').addEventListener('click', function(e) {
      var cell = e.srcElement || e.target,
        column = null;
      if (table.getSelection().length && cell !== cell.parentNode.firstChild) {
        for (var i = 0; i < cell.parentNode.childNodes.length; ++i) {
          if (cell.parentNode.childNodes[i] === cell) {
            column = i - 1;
            break;
          }

        }

        if (column !== null) {
          var msg = ['column-index is ' + column];
          var selection = table.getSelection();
          //if current row has been selected
          if (/\bgoogle-visualization-table-tr-sel\b/.test(cell.parentNode.className)) {
            msg.push('row-index is ' + selection[selection.length - 1].row);
            msg.push('value of clicked cell is:' + data.getValue(selection[selection.length - 1].row, column));
          } else {
            msg.push('current row is not selected');
          }

          alert(msg.join('\n---------\n'))
        }
      } else {
        alert('no row selected');
      }
    });
  });
  table.draw(data, {
    showRowNumber: true
  });
}

Answer 2

对于MainActivity，您可以考虑以下方法来访问列属性（来自表格单元格）：

＆＃13;

＆＃13;

google.visualization.table

＆＃13;

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('boolean', 'Full Time Employee');
    data.addRows([
      ['Mike', {
          v: 10000,
          f: '$10,000'
      },
        true
      ],
      ['Jim', {
          v: 8000,
          f: '$8,000'
      },
        false
      ],
      ['Alice', {
          v: 12500,
          f: '$12,500'
      },
        true
      ],
      ['Bob', {
          v: 7000,
          f: '$7,000'
      },
        true
      ]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));
    google.visualization.events.addListener(table, 'select', function(){
        selectHandler(table);
    });
    table.draw(data, {
        showRowNumber: false
    });
}



function selectHandler(table) {
  var selection = table.getSelection();
  if(selection.length === 0)
      return;

  var cell = event.target; //get selected cell
 
  document.getElementById('output').innerHTML = "Row: " +  selection[0].row + " Column: " +  cell.cellIndex;

}

＆＃13;

＆＃13;

＆＃13;