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. c、c++---linux上的GetTickCount函数

    http://blog.csdn.net/guang11cheng/article/details/6865992 http://wenda.so.com/q/1378766306062794

  2. Spring Boot 快速搭建的三种方式

    方式一:http://start.spring.io/ 打开浏览器,在地址栏中输入http://start.spring.io/ 如下图:  点击generate project 然后就会有一个zip ...

  3. org.in2bits.MyXls.XlsDocument 生成excel文件 ; 如果想读取模板再另外生成的话,试试 NPOI

    优点:不依赖Microsoft组件,在内存中操作excel,读写速度快.   缺点:无法读取模板,只能生成新的excel (我亲自测试是在读取完模板后,不能保存,也不能另存,并且其他人说这个读取还会有 ...

  4. 如何去掉jQWidgets中TreeGrid和Grid右下角的链接

    关于如何去掉这个水印,这是官方的说法. 更新了jQWidgets版本,发现在使用过程中发现每次渲染完TreeGrid和Grid后会在表格右下角出现一个www.jqwidgets.com的span标签. ...

  5. CentOS英文提示修改为中文提示的方法

    1.安装中文支持包:yum -y groupinstall chinese-support 2.修改文件/etc/sysconfig/i18n如下: LANG="zh_CN.UTF-8″ S ...

  6. Git介绍及安装配置

    一.概述 1.1git概念 Git是一个开源的分布式版本控制系统,用于敏捷高效处理任意规模的项目,其作者为Linux创造者Linus Torvalds为管理Linux内核而开放的一个开源的版本控制柔软 ...

  7. Nginx配置优化解读

    全局配置 Nginx的配置文件是nginx的安装目录的conf/nginx .conf,nginx.conf配置文件中,几个全局高级配置在模块部分之上. user  www www; worker_p ...

  8. 点击除元素以外的任意地方隐藏元素js

    比如想实现点击列表弹出筛选器,点击其他任意地方关闭筛选器,如图 该筛选器class名 $(document).click(function () { $(".subMenu").h ...

  9. [Unity3D]关于NaN（Not a Number)的问题

    在游戏运行时,代码若写得不安全很容易出现NAN的异常.一旦NAN出现整个游戏不崩溃也坏死掉了,游戏上了则是要被直接打回来的节奏,更是一个开发及测试人员每人都要扣3000块的大BUG.   一般表现为: ...

  10. MTK 隐藏上方的状态栏

    步骤一: 源码/frameworks/base/packages/SystemUI/src/com/android/systemui/statusbar/phone/PhoneStatusBar.ja ...