14

我正在尝试使用 Chart.js ( http://www.chartjs.org/docs/#pieChart-exampleUsage ) 中的饼图。一切都很顺利，但动画会在页面加载后立即发生，但由于用户必须向下滚动才能看到图表，所以他们不会看到动画。无论如何我可以让动画只有在滚动到那个位置时才开始？另外，如果可能的话，是否可以在每次看到该图表时制作动画？

我的代码如下：

<canvas id="canvas" height="450" width="450"></canvas>
    <script>
        var pieData = [
                {
                    value: 30,
                    color:"#F38630"
                },
                {
                    value : 50,
                    color : "#E0E4CC"
                },
                {
                    value : 100,
                    color : "#69D2E7"
                }

            ];

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);

    </script>
4

6 回答 6

17

您可以将检查是否可以查看某些内容与标志结合起来，以跟踪图形是否在出现在视口中后被绘制（尽管使用发布的插件 bitiou 执行此操作会更简单）：

http://jsfiddle.net/TSmDV/

var inView = false;

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

$(window).scroll(function() {
    if (isScrolledIntoView('#canvas')) {
        if (inView) { return; }
        inView = true;
        new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);
    } else {
        inView = false;  
    }
});
于 2013-09-12T19:32:39.850 回答
3

最好使用延迟插件

https://chartjs-plugin-deferred.netlify.com/

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1"></script>

new Chart(ctx, {
  // ... data ...
  options: {
    // ... other options ...
    plugins: {
      deferred: {
        xOffset: 150,   // defer until 150px of the canvas width are inside the viewport
        yOffset: '50%', // defer until 50% of the canvas height are inside the viewport
        delay: 500      // delay of 500 ms after the canvas is considered inside the viewport
      }
    }
  }
});
于 2020-01-28T11:11:45.600 回答
1

我不知道您是否可以这样做，我遇到了同样的问题并以这种简单的方式在没有任何插件的情况下解决了它，请查看：

$(window).bind("scroll", function(){            
    $('.chartClass').each(function(i){ 
        var dougData = [
            {value: 100, color:"#6abd79"},
            {value: 20, color:"#e6e6e6"}
        ];
        var graphic = new Chart(document.getElementById("html-charts").getContext("2d")).Doughnut(dougData, options);
        $(window).unbind(i);
    });
});
于 2014-04-27T06:56:14.233 回答
1

我对 Chart.js 有同样的问题，并找到了一个非常好的解决方案。GitHub 上有一个由 FVANCOP 称为ChartNew.js的包。他对其进行了扩展并添加了几个功能。

查看示例，图表是通过向下滚动绘制的。

负责是声明

dynamicDisplay : true
于 2014-08-09T13:58:54.397 回答
1

使用IntersectionObserver是更现代的方法，它使您能够选择在触发事件之前必须显示多少元素。

阈值 0 意味着如果元素的任何部分可见，它将触发，而阈值 1 意味着整个元素必须可见。

它的性能比听滚动要好，并且只会在元素从隐藏过渡到可见时触发一次，即使在您连续滚动时也是如此。如果页面内容由于其他事件而发生变化，例如隐藏/显示其他内容或调整窗口大小等，它也可以工作。

这就是我制作径向图表的方式，每次至少有 20% 的图表出现在视野中时都会进行动画处理：

const options = {
    series: [75],
    chart: {
        type: 'radialBar',
    },
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

const observer = new IntersectionObserver(function(entries) {
    if (entries[0].isIntersecting === true) {
        chart.updateSeries([0], false); // reset data to 0, then
        chart.updateSeries([75], true); // set original data and animate
        // you can disconnect the observer if you only want this to animate once
        // observer.disconnect();
    }
}, { threshold: [0.2] });

observer.observe(document.querySelector("#chart"));
于 2021-12-03T00:54:38.153 回答
-1

这就是你想要的：

检查滚动后元素是否可见

下次请检查是否已经有答案；）

或者：jquery.appear

于 2013-09-12T19:17:42.360 回答