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 ...
随机推荐
- 「下载神器」aria2 懒人安装教程 [Windows]
是一款开源.轻量级的多协议命令行下载工具,支持 HTTP/HTTPS.FTP.SFTP.BitTorrent 和 Metalink 协议,拥有众多第三方支持插件,被誉为「下一代下载工具」和「下载神器」 ...
- Sql实现PadLeft
/******************************************************************************** 格式化字符串 ----------- ...
- (转)PCM数据格式
1. 音频简介 经常见到这样的描述: 44100HZ 16bit stereo 或者 22050HZ 8bit mono 等等. 44100HZ 16bit stereo: 每秒钟有 4410 ...
- 转载：手把手教你做iOS推送
手把手教你做iOS推送 http://www.cocoachina.com/industry/20130321/5862.html
- vuejs 获取 Input 值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- u3d Mecanim动画
作为Unity4.0的主要更新功能,Mecanim动画被寄予了很多的期望.系统有先进的地方,也有不足的地方.这些我们留到最后再来总结. 阿赵粗略的学习了一下,写下以下的教程.这篇教程简单的说明了Mec ...
- 安卓开发笔记——Broadcast广播机制（实现自定义小闹钟）
什么是广播机制? 简单点来说,是一种广泛运用在程序之间的传输信息的一种方式.比如,手机电量不足10%,此时系统会发出一个通知,这就是运用到了广播机制. 广播机制的三要素: Android广播机制包含三 ...
- 安卓开发笔记——WebView组件
我们专业方向本是JAVA Web,这学期突然来了个手机App开发的课设,对于安卓这块,之前自学过一段时间,有些东西太久没用已经淡忘了 准备随笔记录些复习笔记,也当做温故知新吧~ 1.什么是WebVie ...
- man 转 pdf _____ jpg 转 pdf
man -t bash | ps2pdf - bash.pdf 将jpeg转成pdf convert *.jpeg images.pdf 将pdf转成jpeg gs -dBATCH -dNOPAUSE ...
- react解析html标签组成的字符串
转载自:https://blog.csdn.net/tongshuo_11/article/details/61195232 var content = '<strong>content& ...