0

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

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

我试过使用jQuery(window).load，但没有奏效。

**更新：分页表看起来像是这个问题的临时解决方案（例如 table.draw(data, {page: 'enable' ,pageSize: 100})），它绝对不是稳定的解决方案，但它是一些东西，问题是它解决了表格而不是图表的这个问题，所以我将继续我的更新

4

2 回答 2

0

<div>在您拥有图表的顶部创建一个带有“正在加载”图像的元素<div>。在页面加载时显示此元素（启动页面时将默认显示“正在加载”）。

使用表格图表的ready事件，您可以创建一个侦听器，该侦听器将在表格可供使用时触发。在这种情况下，您创建了一个函数，<div>用 CSS 隐藏“加载”图像，使其不再显示。

请参阅此处的示例。代码如下：

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


}
于 2013-02-20T04:47:25.280 回答
0

解决方案很简单。在 google.load 中调用您的图表渲染函数作为回调。

例如，改变这个：

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

对此：

  $(document).ready(function() {
     google.load("visualization", "1", {packages:["corechart"],"callback":chartRender});
  });
于 2016-02-25T19:56:44.960 回答