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. 使用appledoc 生成技术API文档具体解释

    一. 首先安装 appledoc 第一步:使用终端命令进行下载安装 git clone git://github.com/tomaz/appledoc.git cd ./appledoc sudo s ...

  2. Android应用坐标系统全面具体解释

    1 背景 去年有非常多人私信告诉我让说说自己定义控件,事实上通观网络上的非常多博客都在讲各种自己定义控件,可是大多数都是授之以鱼.却非常少有较为系统性授之于渔的文章,同一时候由于自己也迟迟没有时间规划 ...

  3. localstorage和sessionstorage上手使用记录

    通过阅读各路大神对web存储locastorage和sessionstorage的用法解析,自己试用了一下,在此留个备忘. 在项目中,如果用到很多次storage,要存储很多数据,就要把它封装成函数了 ...

  4. npm install mongoose错误解决

    今天安装mongoose一直报错,上图 具体的错误记录: info it worked if it ends with ok verbose cli [ 'C:\\Program Files\\nod ...

  5. mybatis-generator 的坑我都走了一遍

    一.简介 mybatis-geneator是一款mybatis自动代码生成工具,可以通过配置,快速生成mapper和xml文件. 二.配置方法 在项目的pom文件中添加插件配置 <plugin& ...

  6. 使用springmvc，jsp，结合网页文本编辑器kindEditor实现基本博客编辑功能

    kindEditor官网:http://kindeditor.net/demo.php 个人实践: 为了在自己的项目中引入一个类似用户写博客的功能,在网上找到了kindeditor,真心又好又易用. ...

  7. eclipse中断点不生效

    摘录自:http://blog.sina.com.cn/s/blog_496117520100kw6b.html Eclipse下Debug时弹出错误“Unable to install breakp ...

  8. mysql中显示当前数据库下的所有表，包括视图。

    环境说明: mysql版本:5.5.57-log 操作系统:Red Hat Enterprise Linux Server release 6.6 (Santiago) 需求:查看当前数据库下所有的表 ...

  9. vim中文手册

    http://vimcdoc.sourceforge.net/doc/help.html

  10. Fade out transition effect using CSS3

    摘要: css3已经被应用到很多网站了,对于创建动态交互的网站是非常有益的.今天就分享一个使用transition实现的鼠标悬停淡阴淡出的效果. 代码: <!DOCTYPE html> & ...