Question

我正在使用Google Visualization API在页面上创建表格。这些表从查询中获取数据，这需要花费大量时间。由于Google Visualization的默认行为是调用API在标题中绘制图表，因此会减慢页面加载时间。

我想用临时“加载”图像加载页面，然后在页面完全加载后执行脚本，以使页面感觉更具响应性。有没有办法做到这一点？

我尝试使用jQuery(window).load，但这不起作用。

**更新：对表格进行分页看起来像是这个问题的临时解决方案（例如table.draw（data，{page：'enable'，pageSize：100}）），它肯定不是稳定的解决方案但它是什么，问题是它解决了表的问题而不是图表，所以我将继续我的更新

Answer 1

使用＆＃39; loading＆＃39;创建<div>元素。图表位于<div>之上的图片。在页面加载时显示此图片（将在您启动页面时显示＆＃39; loading＆＃39;默认值。）

使用表格图表的ready event，您可以创建一个在表格准备就绪时将触发的侦听器。在这种情况下，您创建一个隐藏“加载”功能的功能。使用CSS图像<div>，因此它不再显示。

查看示例here。代码如下：

google.load('visualization', '1', {packages: ['table']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Label');
    dataTable.addColumn('number', 'foo');
    dataTable.addColumn('number', 'bar');
    dataTable.addColumn('number', 'caz');
    dataTable.addColumn('number', 'cad');
    for (var i = 0; i < 500; ++i) {
        dataTable.addRow(['Label ' + i, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100])
    }

    var table1 = new google.visualization.Table(document.getElementById('table'));

    google.visualization.events.addListener(table1, 'ready', function() {
        document.getElementById('loading').style.display='none';
        alert("Chart is Ready!");
    });

    table1.draw(dataTable, null);


}

Answer 2

解决方案很简单。将您的图表呈现功能称为google.load中的回调。

例如，更改此内容：

  $(document).ready(function() {
      google.load("visualization", "1", {packages:["corechart"]});
  });

对此：

  $(document).ready(function() {
     google.load("visualization", "1", {packages:["corechart"],"callback":chartRender});
  });

页面加载后加载Google Visualization API

2 个答案: