jquery.peity.js简介
jQuery简单图表peity.js
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>无标题页</title>
- <script type="text/javascript" src="jQuery.js"></script>
- <script type="text/javascript" src="jquery.peity.js"></script>
- <script type="text/javascript">
- jQuery(function(){
- $(".bar-colours-1").peity("bar", {
- colours: ["red", "green", "blue"],width: 100,height:100
- })
- $(".bar-colours-2").peity("bar", {
- colours: function(value) {
- return value > 0 ? "green" : "red"
- },width: 100,height:100
- })
- $(".bar-colours-3").peity("bar", {
- colours: function(_, i, all) {
- var g = parseInt((i / all.length) * 255)
- return "rgb(255, " + g + ", 0)"
- },width: 100,height:100
- })
- $(".pie-colours-1").peity("pie", {
- colours: ["cyan", "magenta", "yellow", "black"],diameter:100
- })
- $(".pie-colours-2").peity("pie", {
- colours: function(_, i, all) {
- var g = parseInt((i / all.length) * 255)
- return "rgb(255, " + g + ", 0)"
- },diameter:100
- })
- var updatingChart = $(".updating-chart").peity("line", { width: 150,height:50})
- setInterval(function() {
- var random = Math.round(Math.random() * 10)
- var values = updatingChart.text().split(",")
- values.shift()
- values.push(random)
- updatingChart
- .text(values.join(","))
- .change()
- }, 1000)
- })
- </script>
- </head>
- <body>
- <span class="bar-colours-1">5,3,9,6,5,9,7,3,5,2</span>
- <span class="bar-colours-2">5,3,2,-1,-3,-2,2,3,5,2</span>
- <span class="bar-colours-3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
- <br />
- <span class="pie-colours-1">4,7,6,5</span>
- <span class="pie-colours-2">5,3,9,6,5</span>
- <br />
- <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>
- </body>
- </html>
jquery.peity.js简介的更多相关文章
- jQuery遮罩插件jQuery.blockUI.js简介
利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...
- jquery.flot.js简介
JQuery图表插件之Flot Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点.目前支持 Internet Explorer 6+, Chrome, Firefox ...
- jquery.easypiechart.js简介
此插件主要是用来统计新的访问.跳出率.服务器负载.使用的RAM等,功能很强大,带有HTML5的动画效果,效果非常炫,看效果吧easyPieChart一款新型的EASY饼图数据统计Jquery插件截图: ...
- jquery.sparkline.js简介
jQuery线状图插件Sparkline 官网地址:http://omnipotent.net/jquery.sparkline/ 文档地址:http://omnipotent.net/jquery. ...
- jquery.gritter.js简介
Gritter 是一个小型的 jQuery 消息通知插件,通知效果如下图所示: 参考网
- 当 jquery.unobtrusive-ajax.js 遇上Web API
最近在熟悉Abp框架,其基于DDD领域驱动设计...前段可以绕过mvc直接调用根据app层动态生成的webapi,有点神奇~,Web API之前有简单接触过,WCF的轻量级版,一般用于做一写开发性的服 ...
- Vue.js简介
Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...
- pjax 历史管理 jQuery.History.js
更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接.网页标题.以及 ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
随机推荐
- Linux set unset命令
Linux unset命令: 功能说明:unset是一个内建的Unix shell命令,在Bourne shell家族(sh.ksh.bash等)和C shell家族(csh.tcsh等)都有实现. ...
- C# 在多线程环境中，进行安全遍历操作
本文以List作为操作对象MSDN官方给出的List的线程安全的说法:此类型的公共静态成员是线程安全的.但不能保证任何实例成员是线程安全的.只要不修改该集合,List 就可以同时支持多个阅读器.通过集 ...
- linux内置软件安装命令
yum -y install epel-release
- Windows7双系统卸载Ubuntu
正确的删除ubuntu方法如下: 第1步,修复MBR 1.进入win7,下载个软件MbrFix.exe,放在C:\windows\system32文件夹中 2.点击开始>所有程序>附件&g ...
- 关于Struts2的文件上传
要实现Struts2框架的文件上传,需要用到2个jar包 commons-fileupload-1.2.2.jar commons-io-2.0.1.jar 由于文件解析Struts2内部已经帮我们做 ...
- DataTable内容导出为CSV文件
CSVHelper.cs内容: using System; using System.Collections.Generic; using System.Linq; using System.Text ...
- …gen already exists but is not a source folder. Convert to a source folder or rename it [closed]
Right click on the project and go to "Properties" Select "Java Build Path" on th ...
- Apache伪静态配置，支持.htaccess配置方法
第一.编辑httpd.conf文件 A - 在etc/httpd/conf/目录下的httpd.conf 文件,找到: LoadModule rewrite_module modules/mod_re ...
- gcc和g++头文件和库路径的寻找和添加
对所有用户有效修改/etc/profile文件 对个人有效则修改~/.bashrc文件 #在PATH中找到可执行文件程序的路径. export PATH =$PATH:$HOME/bin (可一次指定 ...
- SQL Compare数据库比较工具 完全破解+使用教程
来源http://www.cnblogs.com/duci/articles/4482665.html 一.使用教程 SQL Compare是编程人员常用的比较两个数据库之间差异的工具.可以用来比较数 ...