1

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

}

4

3 回答 3

1

Google Table 有 4 个事件：准备、选择、页面、排序。

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

您可以使用单击而不是鼠标悬停。在选择事件上，我使用 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;
    }       
});
于 2014-07-17T10:05:40.267 回答
0

表格可视化不会在选择事件中传递列信息，因此您无法通过这种方式识别单个单元格。您需要在表格的单元格上注册一个单击事件处理程序，然后确定单元格的行和列索引。这是使用 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 代码应该可以工作。

于 2013-08-22T14:24:42.213 回答
0 
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
});

This gets rowindex based on the row of the html. To get the rowindex based on the data (where the row's index won't change even if you sort the table and it's position changes) use

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

This will run before the code in the .on("click", ...) function in the ready function.

于 2013-10-25T16:10:19.813 回答