多个谷歌可视化表在一个页面上 [英] Multiple google visualization table on one page

问题描述

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

我引用了这个（几乎相同的）问题以获得帮助如何在一个页面上添加两个Google图表？但是如果您在页面创建之前还不知道Dominor Novus的解决方案，的表格数量。例如，有时我需要有5个表，有时我只需要有1个。

我的问题是如何动态创建一个将动态创建的页面多个谷歌可视化表，每个表都有自己的唯一标识符那么当用户点击表格中的一行时，能够返回行号以及动态创建表的唯一标识符？ 解决方案为了有效地解决问题，我们必须将表格数据和表格对象存储在数组中。我们首先为页面顶部的数据和表格对象创建数组。

  var tableData = new Array（）; 
 var table = new Array（）; 
 var tableid = 0; 
  

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

  （id = 0; id< num_of_tables; id ++）{
 var tableID ='table_div'+ id; //创建动态数量的表
 // google可视化表的id 
 
 //为google可视化表生成div 
 $（'< 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'）; （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'，函数（）{
 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事件，如下所示：鼠标移动'，'.google-visualization-table'，函数（）{
tableid = $（this）.closest（'.cd_table'）。attr（'id'）。substring（9）;
}）;

完成了。您可以创建无限量的动态生成的谷歌可视化表格，它可以返回点击的行和点击的表格的ID。

I'm having a problem with creating multiple google visualization tables on a single page. How do I dynamically generate an unknown number of google visualization tables on a single page with complete functionality?

I referenced this (almost identical) question for help How to add two Google charts on the one page? however Dominor Novus's solution does not help if you are not already aware, prior to the creation of the page, of the number of tables. For example, sometimes I will need to have 5 tables, sometimes I will only need to have 1.

My question is how do I dynamically create a page that will dynmically create multiple google visualization tables each with its own unique identifier. Then when a user clicks on a row in the table be able to return the row number as well as the unique identifier for the dynamically created table?

解决方案

In order to effectively come up with a solution to the problem, we must store the table data and the table object in arrays. We first create arrays for the data and the table object at the top of the page.

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

We then generate our table storing them in arrays referenced by a unique identifier. Then in order to fulfill the select functionality of the table we add a listener to the table object. We then grab the id of the containing div of the table, and take the substring of that id to discover what table has just been clicked. Then we take the row of that table as normally done using the method .getSelection(). Once we have both the row and the table id we can return those to the users based on which table and row he clicked.

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

This is nearly perfect, but only works if you clicked on the table already once. We must also add a mousemove event in the initial page load jquery function, like so:

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

And done. You are able to create an unlimited amount of dynamically generated google visualization tables, that can return the row clicked and the id of the table that was clicked.

这篇关于多个谷歌可视化表在一个页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！