zoukankan      html  css  js  c++  java

  • jquery.peity.js简介

    jQuery简单图表peity.js

    [javascript] 
    1. <html xmlns="http://www.w3.org/1999/xhtml">  
    2. <head>  
    3.     <title>无标题页</title>  
    4.     <script type="text/javascript" src="jQuery.js"></script>  
    5.     <script type="text/javascript" src="jquery.peity.js"></script>  
    6.     <script type="text/javascript">  
    7.         jQuery(function(){  
    8.             $(".bar-colours-1").peity("bar", {  
    9.               colours: ["red", "green", "blue"], 100,height:100  
    10.             })  
    11.             $(".bar-colours-2").peity("bar", {  
    12.               colours: function(value) {  
    13.                 return value > 0 ? "green" : "red"  
    14.               }, 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.               }, 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", {  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>  
  • 相关阅读:
    [NOIP2015] 子串 题解
    [NOIP2011] 聪明的质检员 题解
    二进制的一些概念
    [NOIP2012] 借教室 题解
    [POJ3764] The XOR Longest Path 题解
    关于本博客
    【SC-MY限定】让填写问卷星成为自动化！
    JZOJ5833 永恒
    九校联考-DL24凉心模拟Day2总结
    【简解】SP7556 Stock Charts
  • 原文地址：https://www.cnblogs.com/ada-zheng/p/3760923.html
Copyright © 2011-2022 走看看