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中的一些定位属性[图解]
Jul 14 Javascript
js三种排序算法分享
Aug 16 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 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
珊瑚虫IP库浅析
2007/02/15 PHP
分享3个php获取日历的函数
2015/09/25 PHP
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
javaScript语法总结
2016/11/25 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Python使用chardet判断字符编码
2015/05/09 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python实现对输入的密文加密
2019/03/20 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
Python自省及反射原理实例详解
2020/07/06 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
高山背包:High Sierra
2017/11/23 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
医大实习自我鉴定
2013/12/07 职场文书
快递业务员岗位职责
2014/01/06 职场文书
招标承诺书
2014/08/30 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
python实现层次聚类的方法
2021/11/01 Python