Javascript Google可视化表不再加载

我在一个页面上加载了3个表，没有任何问题，现在它们已经消失了，无论我删除什么，它们都不会再出现在页面上

每个表都被一个查询调用。其思想是，每个表都是一个仪表板，使用我查询的数据具有多个控件。表2和表3最终将构建为表1。也许我的事情太多了？我对这个很陌生，所以我相信有更好的方法来实现这一点。仍然在努力理解我能做什么，这会使它停止工作。任何帮助或建议都将不胜感激

google.load("visualization", '1', {packages:['table','controls'], callback: drawTable});
google.setOnLoadCallback(drawTable);

   function drawTable() {
    var queryNew = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=0');
    queryNew.setQuery('where D = "New Hire"'); 
    queryNew.send(handleQueryResponse1);

    var queryTerms = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=0');
    queryTerms.setQuery('where D = "Termination"'); 
    queryTerms.send(handleQueryResponse2);

    var queryTrans = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=1145683023'); 
    queryTrans.send(handleQueryResponse3);

    }

//表1

function handleQueryResponse1(response) {

    var data = response.getDataTable();

    var cssClassNames = {
      'headerRow': '',
      'tableRow': '',
      'oddTableRow': '',
      'selectedTableRow': '',
      'hoverTableRow': '',
      'headerCell': '',
      'tableCell': '',
      'rowNumberCell': ''};

     var dashboard1 = new google.visualization.Dashboard(
            document.getElementById('dashboardnew_div'));

     // Table Views
     var table1 = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'newhire_div',
        options: {
            showRowNumber: false,
            allowHtml: true, 
            cssClassNames: cssClassNames,
            page: 'enable', 
            pageSize: 25,
            width: '100%'
        },
       view: {
        columns: [12, 1, 4, 3, 2, 5, 6, 7, 8, 9, 10, 11, 13]
       }
      });

      var table2 = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'newhire_div',
        options: {
            showRowNumber: false,
            allowHtml: true, 
            cssClassNames: cssClassNames,
            page: 'enable', 
            pageSize: 25,
            width: '100%'
        },
       view: {
        columns: [12, 1, 4, 3, 2, 5, 6, 7, 8, 9, 10, 11, 13, 14]
       }
      });


      // Formatters
      var salary = new google.visualization.NumberFormat({prefix: '$'});
       salary.format(data, 10); // Apply formatter to second column

      // var className = 'google-visualization-table-table';
        // $('.'+className).removeClass(className);


      // Controls
      var stringFilter1 = new google.visualization.ControlWrapper({
        controlType: 'StringFilter',
        containerId: 'stringnew_filter_div',
        options: {
            filterColumnIndex: 4,
            matchType: 'any',
            ui: {
                label: 'Search by Employee',
                labelStacking: 'vertical',
                cssClass: 'searchClass'
            }
        }
      });

      var locationFilter1 = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'locationnew_filter_div',
        options: {
            filterColumnIndex: 1,
            ui: {
                label: 'Filter by Location',
                labelStacking: 'vertical',
                cssClass: 'locationClass'
            }
        }
      });


       // Buttons
       var refresh = document.getElementById('b1');
         refresh.onclick = function() {
          drawTable();
        }

       var hide = document.getElementById("b2");
         hide.onclick = function() {
         dashboard1.bind([stringFilter1, locationFilter1], [table2])
         dashboard1.draw(data);
        }

       // Draw Dashboard
       dashboard1.bind([stringFilter1, locationFilter1], [table1])
       dashboard1.draw(data);
}

//表2

    function handleQueryResponse2(response) {

    var data = response.getDataTable();
    var table4 = new google.visualization.Table(document.getElementById('benefits_div'));
        table4.draw(data);
    }

//表3

    function handleQueryResponse3(response) {

    var data = response.getDataTable();
    var table4 = new google.visualization.Table(document.getElementById('transfers_div'));
        table4.draw(data);
    }

---

也许可以尝试使用

loader.js

与

jsapi

加载库，似乎在这里工作

google.charts.load（'current'{
回调：drawTable，
包：['controls'，'table']
});
函数drawTable（）{
var queryNew=new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=0');
setQuery（'where D=“New Hire”'）；
queryNew.send（handleQueryResponse1）；
var queryTerms=new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=0');
setQuery（'where D=“Termination”'）；
发送（handleQueryResponse2）；
var queryTrans=new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=1145683023');
queryTrans.send（handleQueryResponse3）；
}
函数handleQueryResponse1（响应）{
var data=response.getDataTable（）；
变量cssClassNames={
“headerRow”：“，
“tableRow”：“，
“oddTableRow”：“，
“selectedTableRow”：“，
“hoverTableRow”：“，
“headerCell”：“，
“tableCell”：“，
“rowNumberCell”：”
};
var dashboard1=新的google.visualization.Dashboard(
document.getElementById（'dashboardnew\u div'）
);
//表视图
var table1=新的google.visualization.ChartWrapper({
chartType:'表'，
集装箱船：“纽黑尔分区”，
选项：{
showRowNumber:false，
allowHtml:是的，
cssClassNames:cssClassNames，
页面：“启用”，
页面大小：25，
宽度：“100%”
},
视图：{
列：[12,1,4,3,2,5,6,7,8,9,10,11,13]
}
});
var table2=新的google.visualization.ChartWrapper({
chartType:'表'，
集装箱船：“纽黑尔分区”，
选项：{
showRowNumber:false，
allowHtml:是的，
cssClassNames:cssClassNames，
页面：“启用”，
页面大小：25，
宽度：“100%”
},
视图：{
列：[12,1,4,3,2,5,6,7,8,9,10,11,13,14]
}
});
//格式化程序
var salary=new google.visualization.NumberFormat（{前缀：'$'）；
format（数据，10）；//将格式化程序应用于第二列
//控制
var stringFilter1=新的google.visualization.ControlWrapper({
controlType:'StringFilter'，
containerId:'stringnew\u filter\u div'，
选项：{
过滤柱索引：4，
matchType:'任何'，
用户界面：{
标签：“按员工搜索”，
标签定位：“垂直”，
cssClass:“搜索类”
}
}
});
var locationFilter1=新的google.visualization.ControlWrapper({
controlType:“CategoryFilter”，
集装箱ID:“位置新建过滤器分区”，
选项：{
filterColumnIndex:1，
用户界面：{
标签：“按位置筛选”，
标签定位：“垂直”，
cssClass:“locationClass”
}
}
});
//钮扣
var refresh=document.getElementById（'b1'）；
refresh.onclick=函数（）{
绘图台（）；
}
var hide=document.getElementById（“b2”）；
hide.onclick=function（）{
仪表板1.bind（[stringFilter1，locationFilter1]，[table2]）
仪表盘1.绘制（数据）；
}
//绘制仪表板
仪表板1.bind（[stringFilter1，locationFilter1]，[table1]）
仪表盘1.绘制（数据）；
}
//表2
函数handleQueryResponse2（响应）{
var data=response.getDataTable（）；
var table4=新的google.visualization.Table（document.getElementById（'benefits_div'））；
表4.图纸（数据）；
}
//表3
函数handleQueryResponse3（响应）{
var data=response.getDataTable（）；
var table4=新的google.visualization.Table（document.getElementById（'transfers_div'））；
表4.图纸（数据）；
}

---

也许可以尝试使用

loader.js

与

jsapi

加载库，似乎在这里工作

google.charts.load（'current'{
回调：drawTable，
包：['controls'，'table']
});
函数drawTable（）{
var queryNew=new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=0');
setQuery（'where D=“New Hire”'）；
queryNew.send（handleQueryResponse1）；
var queryTerms=new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=0');
setQuery（'where D=“Termination”'）；
发送（handleQueryResponse2）；
var queryTrans=new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=1145683023');
queryTrans.send（handleQueryResponse3）；
}
函数handleQueryResponse1（响应）{
var data=response.getDataTable（）；
变量cssClassNames={
“headerRow”：“，
“tableRow”：“，
“oddTableRow”：“，
“selectedTableRow”：“，
“hoverTableRow”：“，
“headerCell”：“，
“tableCell”：“，
“rowNumberCell”：”
};
var dashboard1=新的google.visualization.Dashboard(
document.getElementById（'dashboardnew\u div'）
);
//表视图
var table1=新的google.visualization.ChartWrapper({
chartType:'表'，
集装箱船：“纽黑尔分区”，
选项：{
showRowNumber:false，
allowHtml