Question

我在一个页面上有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);
    }

Answer 1

也许尝试使用loader.js与jsapi加载图书馆，似乎在这里工作......

＆＃13;

google.charts.load('current', {
  callback: drawTable,
  packages: ['controls', 'table']
});

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);
}

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

  // 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);
}

// TABLE 2
function handleQueryResponse2(response) {
  var data = response.getDataTable();
  var table4 = new google.visualization.Table(document.getElementById('benefits_div'));
  table4.draw(data);
}

// TABLE 3
function handleQueryResponse3(response) {
  var data = response.getDataTable();
  var table4 = new google.visualization.Table(document.getElementById('transfers_div'));
  table4.draw(data);
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboardnew_div">
  <div id="newhire_div"></div>
  <div id="stringnew_filter_div"></div>
  <div id="locationnew_filter_div"></div>
  <input type="button" id="b1" value="Refresh" />
  <input type="button" id="b2" value="Hide" />
  <div id="benefits_div"></div>
  <div id="transfers_div"></div>
</div>

＆＃13;

谷歌可视化表格不再加载

1 个答案: