一个页面上有多个谷歌可视化表

Multiple google visualization table on one page

本文关键字：谷歌 可视化 一个      更新时间：2023-09-26

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

我引用了这个（几乎相同的）问题来寻求帮助如何在一个页面上添加两个谷歌图表？然而，如果您在创建页面之前还不知道表的数量，那么Dominor Novus的解决方案就没有帮助。例如，有时我需要5张桌子，有时我只需要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);
});

完成了。您可以创建无限数量的动态生成的谷歌可视化表，这些表可以返回单击的行和单击的表的id。

相关文章：