在 scrollTop() 上显示 google 个图表

Question

我正在尝试触发 google 针对特定事件绘制的图表。在这些情况下，它将是 scrollTop 位置（我认为这是最好的解决方案）。

但是我不知道我应该用"setOnLoadCallback"做什么，我觉得这个功能给我带来了很多麻烦。

jQuery(document).ready(function ($) {

if ($(window).scrollTop() > 200) {
        google.setOnLoadCallback(drawVisualization2);
    } else {
        //....
    }


});

当然我可以在这里做一个解决方法，绘制图表，使它们不可见，然后通过在 ex 中添加一个 class 来显示它们。 “.make-visible”当用户能够查看它们时，但我试图将这两者结合起来的主要目的是我不想在页面加载时加载所有内容因为它没有必要，我想加载它时它需要。

这是我的带有图表的 codepen 代码。在此先感谢您的帮助。 http://codepen.io/Nikolaus91/pen/NPmzLw

有趣的是，当在我的 codpen 上启动 Chrome 的 "Inspect element" 时，我可以看到：Jquery 未定义错误。好吧...它应该被指定，因为我确实将它添加到 JS 设置中的 may codepen。

我不明白。

Answer 1

它似乎是硬编码的，但它确实有效。

google.load("visualization", "1", {packages:["corechart"], callback: callback });

function callback() {
    $(window).scroll(function() {
        if( $(window).scrollTop() >= 200 ) {        
                drawVisualization1();      
      }  
    });
};

顺便说一句，别忘了检查代码。

Demo

在 scrollTop() 上显示 google 个图表

Display google chart on scrollTop()

jquery

charts