Question

我正在使用chart.js，但我也希望在滚动时显示图表。

我正在使用此代码：DEMO 1

    var doughnutData = [
            {
                value: 30,
                color:"#F7464A"
            },

            {
                value : 120,
                color : "#4D5360"
            }

        ];


var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);

但它总是出现，而不是滚动。

看着我看到这个小提琴有效果： DEMO 2

但是将以下代码更新为我的第一个演示版不起作用：DEMO 1 UPDATED

Answer 1

doughnutData代替data

new Chart(document.getElementById("canvas").getContext("2d")).Pie(doughnutData);

JSFiddle

如果您需要doghnut：

JSFiddle

Answer 2

如果您不希望重新启动每个卷轴，请尝试以下操作：

$(window).bind("scroll", function(){            
  $('.startChart').each(function(i){    
        var options = {
                animationEasing: 'easeOutQuart',        
                animationSteps: 150,
                segmentShowStroke: true,
                segmentStrokeColor: 'FFF'                   
        };
        var doughnutData = [
            {value: 30, color:"#F7464A"},               
            {value : 120,color : "#4D5360"}         
        ];
        var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData, options);
        $(window).unbind(i);
  });
});

http://jsfiddle.net/MU9aw/74/

Chart.js在滚动上动画

2 个答案: