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. (转)live555学习笔记9－h264 RTP传输详解(1)

    九 h264 RTP传输详解(1) 前几章对Server端的介绍中有个比较重要的问题没有仔细探究:如何打开文件并获得其SDP信息.我们就从这里入手吧. 当RTSPServer收到对某个媒体的DESCR ...

  2. Activiti5小试牛刀demo流程

    demo流程目标:刚接触Activiti5,先大致了解下Activiti5的架构,熟悉下开发流程 搭建开发环境 首先给MyEclipse安装Activiti Designer插件,下载网址http:/ ...

  3. Js正则校验身份证号码

    原文链接:http://gongwen.sinaapp.com/article-126-cmd 这个其实不难,在网上多找一下总会有意外收获的.但是工欲善其事,必先利其器.我们需要了解一下身份证号的规则 ...

  4. tp5的学习

    1.安装,官网下载 2.访问配置:http://localhost/App/public/ 3.入口文件,项目目录/public // 定义应用目录 define('APP_PATH', __DIR_ ...

  5. TensorFlow-Python：创建空列表list与append的用法

    1.空list的创建: l = list() 或者: l = [] 2.list中元素的创建和表达 fruits = ['apple', 'banana', 'pear', 'grapes', 'pi ...

  6. 一款纯HTML+CSS+JS富文本编辑器-handyeditor

    官网:http://he.catfish-cms.com/ 修改版本(修改一些BUG和图片上传服务器 点击下载: handyeditor富文本编辑器.zip): 图片上传接口上传类型: Content ...

  7. iOS：PSTCollectionView

    https://github.com/steipete/PSTCollectionView Open Source, 100% API compatible replacement of UIColl ...

  8. js实现图片粘贴上传到服务器并展示

    最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...

  9. BarTender中每个标签提示手动输入的设置方法

    我们知道手动输入数据进行标签打印,可以利用BarTender中的数据输入表单来实现.表单的创建有利于提示程序员,输入要打印标签的的数据.如果手动输入数据的标签较多,可以设置表单提示为每个标签提示,减去 ...

  10. Python爬虫-什么是爬虫？

    百度百科是这样定义爬虫的: 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂 ...