2014-07-23 58 views
2

我正在試圖製作一個餅圖部分,當它滾動到動畫時,但是我的圖表沒有出現。我下載了它的源文件,這些似乎工作得很好,當我將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> 

+0

你包括它正確嗎?你的控制檯有任何錯誤嗎? –

+0

不是我可以看到 即時通訊使用<腳本src =「js/jquery.easypiechart.js」> – user2513718

+0

我試圖按照與本網站相同的方法,但沒有運氣。 http://q-themes.net/themes/designr/ 從我可以它使用jQuery的航點斯泰格的animaton – user2513718

回答

2

你需要絕對確保所有必需的文件都包含和訪問。右鍵單擊您的頁面,然後單擊「查看源代碼」或「查看頁面源代碼」,然後通過單擊其中的src來打開源代碼中列出的每個「腳本」,以確保可以先加載它。

順序應該是

  1. 的jquery.js(至少1.7.2)
  2. waypoints.js
  3. easypiechat.js

然後一切都應該正常工作。

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

+0

出於某種原因,我的代碼只工作時我已經包括flexslider看到:/ – user2513718

+0

香港專業教育學院更新我的問題 – user2513718

+0

什麼不工作? –