Question

我正在尝试将Google Fusion Tables与Google Charts结合使用来构建一个表格，以响应下拉菜单中的更改。

我非常密切地关注这个例子：

https://developers.google.com/fusiontables/docs/samples/gviz_datatable

我可以使用Fusion Tables中的数据绘制表格。该表将响应选择菜单而没有问题。

我想实现一个selectHandler，它将存储用户选择的行的内容。我将把行的内容传递给其他函数，但我无法使selectHandler正常工作。

  google.load('visualization', '1', {packages: ['table']});

  function drawTable() {

      var query = "SELECT 'key', 'description' as Style, " +
              "'business_name' as Name, 'Rating' " +
              'FROM 15bCp26r1CDuN86Tu8hMOGRWlZwNI30Pl60srz9g';
      var vendors = document.getElementById('vendors').value;
      if (vendors) {
        query += " WHERE 'description' = '" + vendors + "'";
      }

      var queryText = encodeURIComponent(query);

      var gvizQuery = new google.visualization.Query(
        'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);

      gvizQuery.send(function(response) {
        var table = new google.visualization.Table(
          document.getElementById('visualization'));

        var data = response.getDataTable();

        table.draw(data, {
            showRowNumber: false,
            sortColumn: 3,
            sortAscending: false
        });

        google.visualization.events.addListener(table, 'select', selectHandler);

        function selectHandler() {
            //alert("Selected");
            var selectedItem = table.getSelection()[0];
            var value = data.getValue(selectedItem.row, selectedItem.column);
            alert(value);
        }

    });      

  }

我非常关注这个例子。 selectHandler确实有效。当用户点击一行时，我可以弹出警告框，但我无法将该行的内容存储到变量值。

我做错了什么？

Answer 1

在var value函数中声明selectHandler时，value的范围是函数的本地范围。函数返回后，局部变量被标记为垃圾收集并且无法访问。如果您想长期存储value，则需要在selectHandler的本地范围之外声明，如下所示：

var value;
function selectHandler () {...}

顺便说一句，在selectHandler函数中，您应该测试选择的长度，因为它可能为零（这会在代码中引发错误）或大于1（在这种情况下，您是没有捕获所有相关信息）。尝试这样的事情：

function selectHandler() {
    var selection = table.getSelection();
    if (selection.length > 0) {
        // do something
    }
}

或者这个：

function selectHandler() {
    var selection = table.getSelection();
    for (var i = 0; i < selection.length; i++) {
        // do something
    }
}

基于Fusion Tables的Google Charts中的事件监听器

1 个答案: