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 相关文章推荐
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
js实现开关灯效果
Mar 30 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
ThinkPHP路由详解
2015/07/27 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python使用Django实现博客系统完整版
2020/09/29 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
设置python3为默认python的方法
2018/10/31 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python基础教程之while循环
2019/08/14 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
劳动工资科岗位职责范本
2014/03/02 职场文书
表决心的诗句大全
2014/03/11 职场文书
高三毕业寄语
2014/04/10 职场文书
对学校的意见和建议
2015/06/04 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript