首页 > 代码库 > jquery.peity.js简介

jquery.peity.js简介

2024-07-06 11:38:12   225人阅读

jQuery简单图表peity.js

 

[javascript] 
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <title>无标题页</title>  
  4.     <script type="text/javascript" src=http://www.mamicode.com/"jQuery.js"></script>  
  5.     <script type="text/javascript" src=http://www.mamicode.com/"jquery.peity.js"></script>  
  6.     <script type="text/javascript">  
  7.         jQuery(function(){  
  8.             $(".bar-colours-1").peity("bar", {  
  9.               colours: ["red", "green", "blue"],width: 100,height:100  
  10.             })  
  11.             $(".bar-colours-2").peity("bar", {  
  12.               colours: function(value) {  
  13.                 return value > 0 ? "green" : "red"  
  14.               },width: 100,height:100  
  15.             })  
  16.             $(".bar-colours-3").peity("bar", {  
  17.               colours: function(_, i, all) {  
  18.                 var g = parseInt((i / all.length) * 255)  
  19.                 return "rgb(255, " + g + ", 0)"  
  20.               },width: 100,height:100  
  21.             })  
  22.             $(".pie-colours-1").peity("pie", {  
  23.               colours: ["cyan", "magenta", "yellow", "black"],diameter:100  
  24.             })  
  25.             $(".pie-colours-2").peity("pie", {  
  26.               colours: function(_, i, all) {  
  27.                 var g = parseInt((i / all.length) * 255)  
  28.                 return "rgb(255, " + g + ", 0)"  
  29.               },diameter:100  
  30.             })  
  31.              
  32.              
  33.             var updatingChart = $(".updating-chart").peity("line", { width: 150,height:50})  
  34.             setInterval(function() {  
  35.               var random = Math.round(Math.random() * 10)  
  36.               var values = updatingChart.text().split(",")  
  37.               values.shift()  
  38.               values.push(random)  
  39.               updatingChart  
  40.                 .text(values.join(","))  
  41.                 .change()  
  42.             }, 1000)  
  43.         })  
  44.     </script>  
  45. </head>  
  46. <body>  
  47.     <span class="bar-colours-1">5,3,9,6,5,9,7,3,5,2</span>  
  48.     <span class="bar-colours-2">5,3,2,-1,-3,-2,2,3,5,2</span>  
  49.     <span class="bar-colours-3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>  
  50.     <br />  
  51.     <span class="pie-colours-1">4,7,6,5</span>  
  52.     <span class="pie-colours-2">5,3,9,6,5</span>  
  53.     <br />  
  54.     <span class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>  
  55. </body>  
  56. </html>  


联系
我们