使用数据模块时图表出现在视图中时动画高图系列

Question

[当用户滚动到页面的该部分时，要查看Highcharts是否有能力对系列进行动画处理时，我发现this function看起来效果很好。我将其重写为使用Intersection Observer API而不是附加到滚动事件。这是JSFiddle demo，下面是相关代码。

(function (H) {

    var pendingRenders = [];

    H.wrap(H.Series.prototype, 'render', function deferRender(proceed) {
        var series = this,
            renderTo = this.chart.container.parentNode;

        if (!series.options.animation) {
            proceed.call(series);
        } else  {
            pendingRenders.push({
                element: renderTo,
                appear: function () {
                    proceed.call(series);
                }
            });
        }
    });

    function observerSetup() {
      const observer = new IntersectionObserver(entries => {
        entries.forEach((entry,i) => {
          if (entry.isIntersecting) {
            const pendingRender = pendingRenders.find(r => r.element === entry.target)
            pendingRender.appear();
            observer.unobserve(entry.target);
          }
        });
      });

      pendingRenders.forEach(item => observer.observe(item.element));
    }

    document.addEventListener("DOMContentLoaded", observerSetup);

}(Highcharts));

如果您像示例中那样手动设置数据，则效果很好。但是，如果您使用数据模块通过Google表格加载数据，则此方法将不再起作用。在JSFiddle Demo中，您可以看到将数据设置为来自Google表格时，不再加载第一个图表。

[我相信问题是我没有迷上正确的Highcharts类（H.Series.prototype），但是我不确定该怎么做才能将其更改为与Data模块一起使用。

非常感谢您的帮助！

Answer 1

如果您要使用通过data.googleSpreadsheetKey获得的数据来呈现图表，则此插件不是一个好的解决方案，因为数据是异步加载的，并且会破坏图表-实际上，这需要花费更多时间来调查原因以及可能数据模块核心中的一些更改。在我看来，除了找到另一个更简单的解决方案外，当容器可见时触发初始图表加载。我使用了here中的一种建议解决方案来检查容器是否可见以及何时触发了适当的功能以渲染图表。

DEMO应该向您解释一切。第三个图表是加载asnyc。随时根据您的需求进行改进，将其作为准则。

var charts = {
  container1: function(container) {
    Highcharts.chart(container, {

      chart: {
        type: 'area'
      },

      title: {
        text: 'Area chart'
      },

      xAxis: {
        type: 'category'
      },

      series: [{
        data: [
          ['Jan', 29.9],
          ['Feb', 71.5],
          ['Mar', 106.4],
          ['Apr', 129.2],
          ['May', 144.0],
          ['Jun', 176.0],
          ['Jul', 135.6],
          ['Aug', 148.5],
          ['Sep', 216.4],
          ['Oct', 194.1],
          ['Nov', 95.6],
          ['Dec', 54.4]
        ]
      }]

    })
  }, ...