jQuery简单图表peity.js使用示例


Posted in Javascript onMay 02, 2014

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>
Javascript 相关文章推荐
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
jsPDF导出pdf示例
May 02 #Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 #Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 #Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 #Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 #Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 #Javascript
用json方式实现在 js 中建立一个map
May 02 #Javascript
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
php支付宝APP支付功能
2020/07/29 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
node.js require() 源码解读
2015/12/13 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
python邮件发送smtplib使用详解
2020/06/16 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
护士自荐信怎么写
2013/10/18 职场文书
怎样写演讲稿
2014/01/04 职场文书
旅游市场营销方案
2014/03/09 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
奶茶店创业计划书
2014/08/14 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
暑期实践个人总结
2015/03/06 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
2015年度女工工作总结
2015/10/22 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis