Question

Google Visualization API for GWT仅提供对行的控制。如何控制可视化表中的特定单元格？ selection.isCell（）在任何情况下都不会给出真实的结果。

private SelectHandler createSelectHandler(final PieChart chart) {
return new SelectHandler() {
  @Override
  public void onSelect(SelectEvent event) {
    String message = "";

    // May be multiple selections.
    JsArray<Selection> selections = chart.getSelections();

    for (int i = 0; i < selections.length(); i++) {
      // add a new line for each selection
      message += i == 0 ? "" : "\n";

      Selection selection = selections.get(i);

      if (selection.isCell()) {
        // isCell() returns true if a cell has been selected.

        // getRow() returns the row number of the selected cell.
        int row = selection.getRow();
        // getColumn() returns the column number of the selected cell.
        int column = selection.getColumn();
        message += "cell " + row + ":" + column + " selected";
      } else if (selection.isRow()) {
        // isRow() returns true if an entire row has been selected.

        // getRow() returns the row number of the selected row.
        int row = selection.getRow();
        message += "row " + row + " selected";
      } else {
        // unreachable
        message += "Pie chart selections should be either row selections or cell selections.";
        message += "  Other visualizations support column selections as well.";
      }
    }

    Window.alert(message);
  }
};

}

Answer 1

Google Table有4个事件：ready，select，page，sort。

排序或分页时，它会停止侦听ready事件。要在分页或排序后让单元格单击工作，您需要在所有这些单元上添加单击侦听器。

您可以使用click而不是mouseover。在select事件中，我使用getSelection来获取和设置选定的行属性。

var colIndex;

google.visualization.events.addListener(table, 'ready', function () {
    $("#table").find("td").each(function() {    
        $(this).mouseover(function(){
            colIndex=$(this).index();
        });
    }); 
});

google.visualization.events.addListener(table, 'sort', function () {
    $("#table").find("td").each(function() {    
        $(this).mouseover(function(){
            colIndex=$(this).index();
        });
    });
});

google.visualization.events.addListener(table, 'page', function (event) {
    $("#tableGoogle").find("td").each(function() {    
        $(this).mouseover(function(){
            colIndex=$(this).index();
        });
    });
});

google.visualization.events.addListener(table, 'select', function () {
    var selection = table.getSelection();
    var item;
    if(selection.length!=0){
        lastSelection=selection;
    }
    for (var i = 0; i < lastSelection.length; i++) {
        item = lastSelection[i];
    }

    switch (colIndex){
        case 0: 
           data.setValue(item.row,index,true);
           // YOUR CODE FOR COLUMN 0
        break;      
        case 1:
            var id=data.getRowProperty(item.row, 'id');
           // YOUR CODE FOR COLUMN 1
        break;
    }       
});

Answer 2

表可视化不会在选择事件中传递列信息，因此您无法以这种方式识别单个单元格。您需要在表的单元格上注册单击事件处理程序，然后确定单元格的行和列索引。这是使用jQuery实现它的一种方法：

google.visualization.events.addListener(table, 'ready', function () {
    $('#table_div td').click(function () {
        var column = $(this).index();
        var row = $(this).parent().index() - 1; // subtract 1 for the table header
        console.log(row, column);
    });
});

您必须使事件处理程序适应GWT Viz API包中使用的方法，但jQuery代码应该有效。

Answer 3

var rowIndex;
var colIndex;
google.visualization.events.addListener(table, 'ready', function () {
jQuery("#table").on("click", "td:not(.google-visualization-table-th)", function() {
   colIndex = jQuery(this).index();
   rowIndex = jQuery(this).parent().index() - 1;
   alert("row "+rowIndex+" col "+colIndex);
   //put rest of function here
});

这会根据html的行获取rowindex。要根据数据获取rowindex（即使您对表进行排序并且位置发生更改，行的索引也不会更改）使用

google.visualization.events.addListener(table, 'select', function() {               
    var selected=table.getChart().getSelection();
    var item=selected[0];
    rowIndex=item.row;
});

这将在ready函数中的.on（“click”，...）函数中的代码之前运行。

如何在GWT的Google Visualization表中添加Handler on Cell？

3 个答案: