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

Question

我正在用 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 中执行此操作。

所以，在我将 R Markdown 文档编织成 HTML 之后，我决定在 JS 中执行此操作，因为它在 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/