javascript - 是否可以在整个文档准备好之前在网页上加载 Google Chart(在任何新的 GoogleCharts 版本上)？

Question

目前，我一直在使用 GoogleCharts 的第 1 版，因为据我所知，当我需要能够在页面加载之前生成图表时，它是唯一可用的版本。我知道这样做通常不好，但在这种情况下是必要的。

我正在加载动态创建内容的长滚动页面，我希望每个图表在加载时显示，这样整个动态创建的内容不需要在任何图表(顶部的图表)之前加载) 加载。

到目前为止，我找到的唯一解决方案是使用第 1 版的 google charts，但这个版本缺少我希望添加的功能。有人有什么想法吗？

Answer 1

如 callback 的文档中所述...

The loader will also wait for the document to finish loading before calling the callback.

但这仅意味着它将等待静态文档加载，
表示首次打开页面时页面上的任何内容，
而不是动态创建的内容

不管怎样，如果你要连续加载一堆东西，
浏览器将无法跟上，
并会等到处理完成，显示结果
这就是为什么一切都立即出现的原因

如果要显示某些内容，在显示其他内容之前，
您需要延迟添加更多内容，
直到您确认之前的内容已加载

比如绘制第一个图表时，
等待其 'ready' 事件触发，
在绘制下一张图表之前
(或 'animationfinish')

google.visualization.events.addListener(chart, 'animationfinish', drawNextChart);

您可以使用 setTimeout
为动态内容生成相同的结果 这将允许浏览器休息一下，
显示到目前为止的内容，然后继续处理...
(即使超时设置为1m)

window.setTimeout(drawNextContent, 1);

请参阅以下工作片段，
每个图表都是在前一个图表完成后绘制的...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'x');
    data.addColumn('number', 'y');
    data.addRows([
      [new Date("2017-08-16T06:00:00.000Z"), 145289],
      [new Date("2017-08-16T05:00:00.000Z"), 138370],
      [new Date("2017-08-16T04:00:00.000Z"), 117605],
      [new Date("2017-08-16T03:00:00.000Z"), 81268],
      [new Date("2017-08-16T02:00:00.000Z"), 59815],
      [new Date("2017-08-16T01:00:00.000Z"), 51899]
    ]);

    var options = {
      animation: {
        duration: 1000,
        startup: true
      }
    };

    drawChart0();

    function drawChart0() {
      var container = document.getElementById('charts').appendChild(document.createElement('div'));
      var chart = new google.visualization.LineChart(container);
      google.visualization.events.addListener(chart, 'animationfinish', drawChart1);
      chart.draw(data, options);
    }

    function drawChart1() {
      var container = document.getElementById('charts').appendChild(document.createElement('div'));
      var chart = new google.visualization.LineChart(container);
      google.visualization.events.addListener(chart, 'animationfinish', drawChart2);
      chart.draw(data, options);
    }

    function drawChart2() {
      var container = document.getElementById('charts').appendChild(document.createElement('div'));
      var chart = new google.visualization.LineChart(container);
      google.visualization.events.addListener(chart, 'animationfinish', drawContent0);
      chart.draw(data, options);
    }

    function drawContent0() {
      var container = document.getElementById('charts').appendChild(document.createElement('div'));
      container.innerHTML = document.getElementById('content-template').innerHTML;
      window.setTimeout(drawContent1, 1000);
    }

    function drawContent1() {
      var container = document.getElementById('charts').appendChild(document.createElement('div'));
      container.innerHTML = document.getElementById('content-template').innerHTML;
    }
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="charts"></div>

<script id="content-template" type="text/html">
  <div><h3>Dynamic Content</h3></div>
  <div>shows after charts finish</div>
</script>