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. numpy中dtype

    简单说明dtype使用方法: Rule为规则类,其中有3个字段,1为类型,2为计算规则,3为保留位数 如 :'close': Rule(float64, 1 / 10000.0, 2), 表示收盘价, ...

  2. googletest进行单元测试（使用cmake编译）

    一.前提: 1.假定你的系统为centos6系列 2.假定你已经安装了基本的编译环境,gcc,g++4.4.7 3.假定你已经设置了环境变量:KDS_MOBILE_STOCK_HOME 4.假定你已经 ...

  3. 模式识别之knn---KNN(k-nearest neighbor algorithm)--从原理到实现

    用官方的话来说,所谓K近邻算法,即是给定一个训练数据集,对新的输入实例,在训练数据集中找到与该实例最邻近的K个实例(也就是上面所说的K个邻居),这K个实例的多数属于某个类,就把该输入实例分类到这个类中 ...

  4. 启动其他APK的Activity方法 （转至http://www.cnblogs.com/lijunamneg/archive/2013/02/26/2934060.html）

    有两个app,分别叫做App1和App2.App1包含两个Activity,分别叫做App1_A和App1_B.其中App1_A是入口Activity.也就是App1_A设置intent-filter ...

  5. java EE 环境配置（JDK + Tomcat + Eclipse for java EE）

    这学期的课程多数都是java语言的,像Java Web程序设计,java课程设计案例,所以趁周末先把软件,环境配置好. 下载JDK 先给上下载链接:http://www.oracle.com/tech ...

  6. git基于历史commit创建分支

    基于以前的commit创建一个分支 步骤: 1.确定需要取出版本的commit值 git log 2.基于该commit创建分支 git branch <branch name> < ...

  7. Android使用http协议与服务器通信

    网上介绍Android上http通信的文章很多,不过大部分只给出了实现代码的片段,一些注意事项和如何设计一个合理的类用来处理所有的http请求以及返回结果,一般都不会提及.因此,自己对此做了些总结,给 ...

  8. 安卓开发笔记——ListView加载性能优化ViewHolder

    在前不久做安卓项目的时候,其中有个功能是爬取某网站上的新闻信息,用ListView展示,虽然做了分页,但还是觉得达不到理想流畅效果. 上网查阅了些资料,发现一些挺不错的总结,这里记录下,便于复习. 当 ...

  9. UNIX环境编程学习笔记（13）——文件I/O之标准I/O流

    lienhua342014-09-29 1 标准 I/O 流 之前学习的都是不带缓冲的 I/O 操作函数,直接针对文件描述符的,每调用一次函数可能都会触发一次系统调用,单次调用可能比较快捷.但是,对于 ...

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

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