首页>>Jquery文字>>动画统计，包括曲线，柱状图等(2013-12-08)

动画统计，包括曲线，柱状图等

动画统计，包括曲线，柱状图等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <table style="margin-left:auto;margin-right:auto;">  
  2. <tr>  
  3. <td style="text-align:center;"><h3 style="margin-bottom:0px;">Example 1</h3>  
  4. <div id="chart1" style="width:540px;height:250px;padding:5px;"></div>  
  5. <div style="text-align:right;padding-right:5px;"> Start delay:  
  6. <input id="start" style="width:35px" value="0" />  
  7. Steps:  
  8. <input id="steps" style="width:25px" value="135" />  
  9. Duration:  
  10. <input id="duration" style="width:35px" value="3000" />  
  11. <i>ms</i> Direction:  
  12. <select id="dir">  
  13. <option value="right">Right</option>  
  14. <option value="left" selected>Left</option>  
  15. </select>  
  16. <button id="bnt1" type="button">Animate</button>  
  17. </div></td>  
  18. </tr>  
  19. <tr>  
  20. <td style="text-align:center;"><h3 style="margin-bottom:0px;">Example 2</h3>  
  21. <div id="chart2" style="width:540px;height:250px;padding:5px;"></div>  
  22. <button id="bnt2" type="button">Animate</button></td>  
  23. </tr>  
  24. <tr>  
  25. <td style="text-align:center;"><h3 style="margin-bottom:0px;">Example 3</h3>  
  26. <div id="chart3" style="width:540px;height:250px;padding:5px;"></div>  
  27. <button id="bnt3" type="button">Animate</button></td>  
  28. </tr>  
  29. <tr>  
  30. <td style="text-align:center;"><h3 style="margin-bottom:0px;">Example 4</h3>  
  31. <div id="chart4" style="width:540px;height:250px;padding:5px;"></div>  
  32. <button id="bnt4" type="button">Animate</button></td>  
  33. </tr>  
  34. </table>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     $(window).load(function () {  
  3.   
  4.     var d8 = [[2, 5],[4, 8],[6, 2],[7, 5],[9,1],[10, 4],[12, 5],[13, 6],[14, 4]];  
  5.     var d9 = [[2, 4],[2.5, 5],[4.5, 8],[6.5, 2],[7.5, 5],[9.5,1],[10.5, 4],[12.5, 5],[13.5, 6],[14.5, 4],[15, 3]];    
  6.     var plot1 = $.plotAnimator($("#chart1"), [{data : d8, bars: { show: true, fill: true}},{data : d9, lines: {lineWidth:5}, animator: {start:$("#start").val(), steps:$("#steps").val(), duration:$("#duration").val(), direction: $("#dir").val()}}]);  
  7.       
  8.     $("#bnt1").attr("disabled", "disabled");  
  9.     $("#chart1").on("animatorComplete", function() {  
  10.         $("#bnt1").removeAttr("disabled")  
  11.     });  
  12.     $("#bnt1").on("click",function() {  
  13.         $("#bnt1").attr("disabled", "disabled");  
  14.         plot1 = $.plotAnimator($("#chart1"), [{data : d8, bars: { show: true, fill: true}},{data : d9, lines: {lineWidth:5}, animator: {start:$("#start").val(), steps:$("#steps").val(), duration:$("#duration").val(), direction: $("#dir").val()}}]);  
  15.     });  
  16.   
  17.   
  18.   
  19.     var d0 = [[2, 5], [4, 8], [6, 2], [7, 3], [10, 4], [12, 5], [13, 6], [14, 4]];  
  20.         var plot2 = $.plotAnimator($("#chart2"), [{ data: d0, animator: {steps: 136, duration: 2500, start:0}, lines: { show: true, fill: false },label: "Let's Go" }],{grid: { backgroundColor: { colors: [ "#fff", "#eee" ] }}});  
  21.   
  22.     $("#bnt2").attr("disabled", "disabled");  
  23.     $("#chart2").on("animatorComplete", function() {  
  24.         $("#bnt2").removeAttr("disabled")  
  25.     });  
  26.     $("#bnt2").on("click",function() {  
  27.         $("#bnt2").attr("disabled", "disabled");  
  28.             plot2 = $.plotAnimator($("#chart2"), [{ data: d0, animator: {steps: 136, duration: 2500, start:0}, lines: { show: true, fill: false },label: "Let's Go" }],{grid: { backgroundColor: { colors: [ "#fff", "#eee" ] }}});  
  29.     });  
  30.   
  31.   
  32.     var d5 = [[1, 4], [2, 2], [4, 4], [6, 2], [8, 4], [10, 2], [15, 4], [20, 2]];  
  33.         var d6 = [[1, 3], [20, 3]];  
  34.     var plot3 = $.plotAnimator($("#chart3"), [{ data: d5, animator: {steps: 136, duration: 2000, start:0}, lines: { show: true, fill: true }, label: "Fill this"}, { data: d6, lines: { show: true, fill: false}, label: "Standard Values" }],{grid: { backgroundColor: { colors: [ "#fff", "#ebe" ] }}});  
  35.   
  36.     $("#bnt3").attr("disabled", "disabled");  
  37.     $("#chart3").on("animatorComplete", function() {  
  38.         $("#bnt3").removeAttr("disabled")  
  39.     });  
  40.     $("#bnt3").on("click",function() {  
  41.         $("#bnt3").attr("disabled", "disabled");  
  42.         plot3 = $.plotAnimator($("#chart3"), [{ data: d5, animator: {steps: 136, duration: 2000, start:0}, lines: { show: true, fill: true }, label: "Fill this"}, { data: d6, lines: { show: true, fill: false}, label: "Standard Values" }],{grid: { backgroundColor: { colors: [ "#fff", "#ebe" ] }}});  
  43.     });  
  44.   
  45.   
  46.     var d2 = [];  
  47.     for (var i = 0 ; i < 20.1 ; i += 0.1) d2.push([i, Math.sin(i)]);  
  48.         var d3 = [[0, 0], [20, 0]];  
  49.         var plot4 = $.plotAnimator($("#chart4"), [{ data: d2, animator: {steps: 136, duration: 3000, start:0}, lines: { show: true, fill: true }, label: "sin(x)" }, { data: d3, lines: { show: true, fill: false } }, { data: d2, lines: { show: true, fill: false } }],{grid: { backgroundColor: { colors: [ "#fff", "#eee" ] }}});  
  50.   
  51.     $("#bnt4").attr("disabled", "disabled");  
  52.     $("#chart4").on("animatorComplete", function() {  
  53.         $("#bnt4").removeAttr("disabled")  
  54.     });  
  55.     $("#bnt4").on("click",function() {  
  56.         $("#bnt4").attr("disabled", "disabled");  
  57.             plot4 = $.plotAnimator($("#chart4"), [{ data: d2, animator: {steps: 136, duration: 3000, start:0}, lines: { show: true, fill: true }, label: "sin(x)" }, { data: d3, lines: { show: true, fill: false } }, { data: d2, lines: { show: true, fill: false } }],{grid: { backgroundColor: { colors: [ "#fff", "#eee" ] }}});  
  58.     });  
  59.   
  60.   
  61.     });  
  62. </script>   

 


原文地址:http://www.freejs.net/article_jquerywenzi_158.html