在一个页面上显示多个Google可视化表格

Question

我在单个页面上创建多个Google可视化表格时遇到问题。如何在具有完整功能的单个页面上动态生成未知数量的Google可视化表格？

我引用了这个（几乎相同）的问题以获取帮助How to add two Google charts on the one page?但是，如果您在创建页面之前尚未意识到表的数量，Dominor Novus的解决方案将无济于事。例如，有时我需要有5个表格，有时我只需要有1个表格。有时我只需要有1个表格。有时我只需要有1个表格。有时我只需要有1个表格。我的问题是如何动态创建一个页面，它将动态创建多个具有自己唯一标识符的Google可视化表格。那么当用户点击表中的一行时，能够返回行号以及动态创建的表的唯一标识符？

Answer 1

为了有效地解决问题，我们必须将表格数据和表格数据存储在数组中。我们首先为页面顶部的数据和表格对象创建数组。

var tableData=new Array(); 
var table=new Array(); 
var tableid=0; 

然后，我们生成我们的表，将它们存储在由唯一标识符引用的数组中。然后为了完成表格的选择功能，我们向表格对象添加一个监听器。然后，我们获取表格中包含的div的id，并获取该id的子字符串，以发现刚点过的表格。然后，我们通常使用方法.getSelection（）完​​成该表的那一行。一旦我们同时拥有行和表id，我们就可以根据他点击的表和行将这些返回给用户。

//create dynamic number of tables 
for (id=0;id<num_of_tables;id++) { 
    var tableID = 'table_div' + id; //The id of the google visualization table 

    //Generate the div for the google visualization table 
    $('<div/>', { 
     id: tableID, 
     class: 'cd_table' 
    }).appendTo('#tables'); 

    listData = data; 

    if (listData[id].length>0) { 
     tableData[id] = new google.visualization.DataTable(); 

     tableData[id].addColumn('string', 'name'); 
     tableData[id].addColumn('string', 'email'); 

     for (var i=0; i<listData[id].length; i++) { 
      tableData[id].addRows(1);   
      tableData[id].setCell(i,0,listData[id][i].name); 
      tableData[id].setCell(i,1,listData[id][i].email); 
     } 
    } 

    table[id] = new google.visualization.Table(document.getElementById(tableID)); 
    table[id].draw(tableData[id], {showRowNumber: false, sortColumn: 0}); 

    google.visualization.events.addListener(table[id], 'select', function() { 
     $(document).on('mousemove', '.google-visualization-table', function() { 
      tableid=$(this).closest('.cd_table').attr('id').substring(9); 
     }); 

     var row; 
     if (table[tableid].getSelection()[0] != undefined) { 
      row = table[tableid].getSelection()[0].row; 
      lastRowClick = row; 
     } else row = lastRowClick; 
     alert('table id:' + tableid + ' row:' + row); 
    }); 
} 

这几乎是完美的，但只适用于如果您已经单击过表格一次。我们还必须在初始页面加载jquery函数中添加一个mousemove事件，如下所示：

$(document).on('mousemove', '.google-visualization-table', function() { 
    tableid=$(this).closest('.cd_table').attr('id').substring(9); 
}); 

并完成。您可以创建无限量的动态生成的Google可视化表格，该表格可以返回单击的行和单击的表的ID。