Javascript 使用数据模块时，当图表出现在视图中时，为Highcharts系列设置动画

当我查看Highcharts是否能够在用户滚动到页面的那一部分时在系列中设置动画时，我发现这似乎非常有效。我将其重写为使用交叉点观察者API，而不是附加到滚动事件。以下是相关代码的列表

(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 Sheets加载数据，这将不再有效。在中，您可以看到，当数据设置为来自Google Sheets时，第一个图表不再加载

我认为问题在于我没有连接到正确的Highcharts类（

H.Series.prototype

），但我不确定要做什么才能将其更改为数据模块

---

非常感谢您的帮助

如果您想使用通过使用数据获取的数据来呈现图表。googleSpreadsheetKey此插件不是一个好的解决方案，因为数据是异步加载的，它会破坏图表-实际上需要更多的时间来调查数据模块核心为什么会发生变化，可能会发生一些变化。除此之外，我发现了另一个更简单的解决方案——在容器可见时触发初始图表加载。我使用了中建议的解决方案之一来检查容器是否可见，以及何时触发适当的函数来呈现图表

医生应该向你解释一切。第三个图表是加载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]
        ]
      }]

    })
  }, ...

---

谢谢你的回复！不幸的是，这并不是我想要达到的效果。当图表进入视图时，我不想在整个图表中设置动画，我只想在系列中设置动画（如线条或区域，或饼图的切片）。这就是为什么我采用了我所采用的方法，尽管你是对的，但显然异步数据加载不起作用。对我来说，视觉效果几乎相同，但我知道这种方法可能会改变整个应用程序的功能。我发现您的解决方案也不能很好地用于多个系列，请参见：-区域有两个系列，只有一个是渲染。在建议的解决方案中，这个问题不存在。