R Markdown-Highcharter-可见时显示动画图，而不是页面加载时？

Question

bounty到期在4天内。这个问题的答案有资格获得+ 50声望赏金。ScoutEU想要引起更多的关注这个问题：如果在R中不可能做到这一点，我想知道如何将R代码包装在JS中，从而可以使用JS。

我正在用R Markdown编写报告，其中包含多个动画highcharts。

这些动画效果很好，但是它们全部在html页面加载时（编织后）运行，而不是在用户滚动到该页面时运行，因此从根本上讲，动画是毫无意义的，因为用户从未看到过它。

动画图表的示例在此问题的底部。

是否有办法使其在出现时动画化？我发现的所有示例都使用jsfiddle，并且我正在使用R Markdown。

非常感谢

library(dplyr)
library(stringr)
library(purrr)

n <- 5

set.seed(123)

df <- data.frame(x = seq_len(n) - 1) %>% 
  mutate(
    y = 10 + x + 10 * sin(x),
    y = round(y, 1),
    z = (x*y) - median(x*y),
    e = 10 * abs(rnorm(length(x))) + 2,
    e = round(e, 1),
    low = y - e,
    high = y + e,
    value = y,
    name = sample(fruit[str_length(fruit) <= 5], size = n),
    color = rep(colors, length.out = n),
    segmentColor = rep(colors2, length.out = n)
  )


hcs <- c("line")  %>% 
  map(create_hc) 

hcs

Answer 1

[好，我自己想出了解决方法，如果将来有人偶然发现这篇文章，我将在此处发布答案。

首先，我发现在R中没有关于此操作的任何内容。

因此，我决定在JS中执行此操作，因为我将R Markdown文档编织为HTML，因为它在R Markdown中不起作用。

一旦它是一个HTML文件，请在TextEdit或记事本中将其打开，并在其中一个图表之前添加以下代码：

<script>
(function (H) {

    var pendingRenders = [];

    // https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433
    function isElementInViewport(el) {

        var rect = el.getBoundingClientRect();

        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (
                window.innerHeight ||
                document.documentElement.clientHeight
            ) &&
            rect.right <= (
                window.innerWidth ||
                document.documentElement.clientWidth
            )
        );
    }

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

        // It is appeared, render it
        if (isElementInViewport(renderTo) || !series.options.animation) {
            proceed.call(series);

        // It is not appeared, halt renering until appear
        } else  {
            pendingRenders.push({
                element: renderTo,
                appear: function () {
                    proceed.call(series);
                }
            });
        }
    });

    function recalculate() {
        pendingRenders.forEach(function (item) {
            if (isElementInViewport(item.element)) {
                item.appear();
                H.erase(pendingRenders, item);
            }
        });
    }

    if (window.addEventListener) {
        ['DOMContentLoaded', 'load', 'scroll', 'resize']
            .forEach(function (eventType) {
                addEventListener(eventType, recalculate, false);
            });
    }

}(Highcharts));
</script>

当您滚动到图表时，它们便会动画，而不是打开HTML文件时。

注意：我从中获得代码的JSFIDDLE是从这里来的：

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/studies/appear/