将按钮（HTML）插入Google可视化表格图表

Question

问题

使用Google Chart Tool可以在字段值中插入HTML值，但是，我不相信这是一种很好的做法。

我使用的方法如下：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Height', 'Smokes','test'],
    ['Tong Ning mu', 174, true,'<input type="button" value="test" />'],
    ['Huang Ang fa', 523, false,'<input type="button" value="test" />'],
    ['Teng nu', 86, true,'<input type="button" value="test" />']
  ]);

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, {
    allowHtml: true
  });
}

我的问题

1. 还有其他更好的方法来实现这个目标吗？
2. 是否有方法从这些按钮中捕获事件，同时还检索接收事件的行的ID？换句话说，我如何知道单击了哪个按钮以及它代表哪一行？

Answer 1

  

是否有办法从这些按钮中捕捉事件，同时也是如此   检索接收事件的行的id？其他   单词，我如何知道单击了哪个按钮以及哪一行   它代表什么？

尝试这种方式，例如

＆＃13;

＆＃13;

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function getSelectedRowNumber(table) {
  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) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message); 
}
function drawTable() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Height', 'Smokes','test'],
    ['Tong Ning mu', 174, true,'<input type="button" value="test" />'],
    ['Huang Ang fa', 523, false,'<input type="button" value="test" />'],
    ['Teng nu', 86, true,'<input type="button" value="test" />']
  ]);

  // Create and draw the visualization.
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%',
    cssClassNames: {tableRow: 'myClass'}
  });
  // this works for buttons
  $(document).on('click','input[type=button]',function() {
    getSelectedRowNumber(table);
  });
  // this works for clicking on row uncomment to test it
  /*$(document).on('click','tr.myClass',function() {
    getSelectedRowNumber(table);
  });*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我一直在使用谷歌图表，据我所知，没有更好的方法。

你的方式应该是有效的。祝好运。 ：）