Question

我试图让一个饼图部分在滚动到它时进行动画处理，但是我的图表没有出现。我下载了它的源文件，当我将jquery.easypiechart.js移动到我的JS文件夹时，这些似乎工作正常。

<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <link rel="stylesheet" href="css/bootstrap.css">

    <link id="main" rel="stylesheet" href="css/main.css">
    </head>

<body>
<section id="span">

        <div class="container">

            <div class="row span">

                <div class="col-sm-6 col-md-3 text-center">
                    <span class="chart" data-percent="80"><span class="percent">80</span></span>

                </div>
                <div class="col-sm-6 col-md-3 text-center">
                    <span class="chart" data-percent="70"><span class="percent">70</span></span>

                </div>
                <div class="col-sm-6 col-md-3 text-center">
                    <span class="chart" data-percent="60"><span class="percent">60</span></span>

                </div>
                <div class="col-sm-6 col-md-3 text-center">
                    <span class="chart" data-percent="90"><span class="percent">90</span></span>

                </div>

            </div><!--End row -->

        </div><!--End container -->

    </section><!--End skills section -->


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


    <script src='js/jquery.flexslider.min.js'></script>

    <script src="js/waypoints.js"></script>
    <script src="js/jquery.easypiechart.js"></script>


<script type="text/javascript">


$(document).ready(function() {

$('#span').waypoint(function(){
    $('.chart').each(function(){
    $(this).easyPieChart({
            size:170,
            animate: 2000,
            lineCap:'butt',
            scaleColor: false,
            barColor: '#ccc',
            lineWidth: 10
        });
    });
},{offset:'80%'});






}); </script>



</body>

Answer 1

您需要确保所有必需的文件都包含在内并且可以访问。右键单击您的页面，然后单击“查看源代码”或“查看页面源”，然后单击其src打开源中列出的每个“脚本”，以确保您可以先加载它。

订单应该是

jQuery.js（至少1.7.2）
waypoints.js
easypiechat.js

然后一切都应该正常。

演示：http://jsfiddle.net/robschmuecker/JxvE9/2/

简单的饼图没有出现

1 个答案: