jQuery简单图表peity.js

  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"],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. var updatingChart = $(".updating-chart").peity("line", { width: 150,height:50})
  32. setInterval(function() {
  33. var random = Math.round(Math.random() * 10)
  34. var values = updatingChart.text().split(",")
  35. values.shift()
  36. values.push(random)
  37. updatingChart
  38. .text(values.join(","))
  39. .change()
  40. }, 1000)
  41. })
  42. </script>
  43. </head>
  44. <body>
  45. <span class="bar-colours-1">5,3,9,6,5,9,7,3,5,2</span>
  46. <span class="bar-colours-2">5,3,2,-1,-3,-2,2,3,5,2</span>
  47. <span class="bar-colours-3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
  48. <br />
  49. <span class="pie-colours-1">4,7,6,5</span>
  50. <span class="pie-colours-2">5,3,9,6,5</span>
  51. <br />
  52. <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>
  53. </body>
  54. </html>

jquery.peity.js简介的更多相关文章

  1. jQuery遮罩插件jQuery.blockUI.js简介

    利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...

  2. jquery.flot.js简介

    JQuery图表插件之Flot Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点.目前支持 Internet Explorer 6+, Chrome, Firefox ...

  3. jquery.easypiechart.js简介

    此插件主要是用来统计新的访问.跳出率.服务器负载.使用的RAM等,功能很强大,带有HTML5的动画效果,效果非常炫,看效果吧easyPieChart一款新型的EASY饼图数据统计Jquery插件截图: ...

  4. jquery.sparkline.js简介

    jQuery线状图插件Sparkline 官网地址:http://omnipotent.net/jquery.sparkline/ 文档地址:http://omnipotent.net/jquery. ...

  5. jquery.gritter.js简介

    Gritter 是一个小型的 jQuery 消息通知插件,通知效果如下图所示: 参考网

  6. 当 jquery.unobtrusive-ajax.js 遇上Web API

    最近在熟悉Abp框架,其基于DDD领域驱动设计...前段可以绕过mvc直接调用根据app层动态生成的webapi,有点神奇~,Web API之前有简单接触过,WCF的轻量级版,一般用于做一写开发性的服 ...

  7. Vue.js简介

    Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...

  8. pjax 历史管理 jQuery.History.js

    更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接.网页标题.以及 ...

  9. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

随机推荐

  1. Unity---------Mesh理解

    Mesh顾名思义“网格”,Unity3D里面所有的模型都是由Mesh组成的,UI也不例外. 例如下图,模型上的一个个小网格就是Mesh,这些Mesh有不同的三维顶点(Vector3),共同组成了一个3 ...

  2. winform 用户控件事件的写法

    public partial class UcTest : UserControl { public UcTest() { InitializeComponent(); } //定义事件 public ...

  3. IDEA添加非空Getter方法模板

    #if($field.modifierStatic) static ## #end $field.type ## #set($name = $StringUtil.capitalizeWithJava ...

  4. 安卓开发笔记——Gallery组件+ImageSwitcher组件

    什么是Gallery? Gallery是一个水平的列表选择框,它允许用户通过拖动来查看上一个.下一个列表选项. 下图是今天要实现的最终效果: 利用Gallery组件实现的一个横向显示图像列表,可以通过 ...

  5. 1. BeeGo 介绍与项目的创建，启动

    简介 BeeGo是一个快速开发Go而应用的HTTP框架,他可以用来快速开发API,web以及后端服务等各种应用,是一个restful 的框架,主要涉及灵感来源于tornado,sinatr和flask ...

  6. VC获得本机网络连接状态

    /本机网络连接类型(成功) #define  NET_TYPE_RAS_DIAL_UP_CONNECT_NET           0x01    //上网类型:采用RAS拨号连接上网    0x01 ...

  7. python中，数字类型计算

    说明: 今天在看python数字类型的操作,在此记录下. 操作过程: 1.数字的加减乘除 >>> 2 + 24>>> 4 - 22>>> 2 - ...

  8. mongodb的一些性能管理工具

    1.db.serverStatus()//查看实例运行状态,例如查看当前的连接数之类的 2. mms云平台 //由10gen提供的云管理平台//mms=mongo manage service htt ...

  9. Git初级使用教程

    什么是 Git? Git 是一款免费的.开源的.分布式的版本控制系统.旨在快速高效地处理无论规模大小的任何软件工程. 每一个 Git克隆 都是一个完整的文件库,含有全部历史记录和修订追踪能力,不依赖于 ...

  10. Window系统、主函数和窗体函数这三者之间的关系

    理解Window系统.主窗体.窗体函数这三者之间的关系,对于编写Windows程序十分重要. 主函数和窗体函数都是由Windows系统来调用的函数.仅仅只是主函数是程序启动之后.系统首先调用的函数: ...