jqPlot jquery的页面图表绘制工具


Posted in Javascript onJuly 25, 2009

jqplot是基于一个基本的jqplot.js文件,并有多个js文件支持的插件——也就是说jqplot.js文件只能支持线状图的绘制,对于饼状图,柱状图等图形需要引入pieRenderer.js等文件。
这里参照jqPlot的官方文档,以饼状图为例简单的说一下jqPlot的用法:
第一步,引入js文件(如果是画线状图之外的其他图表,需要引入相关js文件,这里引入饼状图文件pieRenderer)

<!--[if IE]><script language="javascript" type="text/javascript" src="./excanvas.js"></script><![endif]--> 
<link rel="stylesheet" type="text/css" href="./jquery.jqplot.css" /> 
<script language="javascript" type="text/javascript" src="./jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript" src="./jquery.jqplot.js"></script> 
<script language="javascript" type="text/javascript" src="./plugins/jqplot.pieRenderer.js"></script>

第二步,增加一个图表展示区域的容器
<div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div>

第三步,获取数据
line1 = [['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys', 6], ['moles', 5], ['ground hogs', 4]];

第四步,配置Option对象,并创建图表
$.jqplot('chart', [line1], { 
title:'pieRenderer ',//设置饼状图的标题 
seriesDefaults: {fill: true, 
showMarker: false, 
shadow: false, 
renderer:$.jqplot.PieRenderer, 
rendererOptions:{ 
diameter: undefined, // 设置饼的直径 
padding: 20, // 饼距离其分类名称框或者图表边框的距离,变相该表饼的直径 
sliceMargin: 9, // 饼的每个部分之间的距离 
fill:true, // 设置饼的每部分被填充的状态 
shadow:true, //为饼的每个部分的边框设置阴影,以突出其立体效果 
shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离 
shadowDepth: 5, // 设置阴影区域的深度 
shadowAlpha: 0.07 // 设置阴影区域的透明度 
} 
}, 
legend:{ 
show: true,//设置是否出现分类名称框(即所有分类的名称出现在图的某个位置) 
location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w. 
xoffset: 12, // 分类名称框距图表区域上边框的距离(单位px) 
yoffset: 12, // 分类名称框距图表区域左边框的距离(单位px) 
} 
});

完整的代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Simple Test</title> 
<!--[if IE]><script language="javascript" type="text/javascript" src="./excanvas.js"></script><![endif]--> 
<link rel="stylesheet" type="text/css" href="./jquery.jqplot.css" /> 
<script language="javascript" type="text/javascript" src="./jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript" src="./jquery.jqplot.js"></script> 
<script language="javascript" type="text/javascript" src="./plugins/jqplot.pieRenderer.js"></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function(){ 
line1 = [['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys', 6], ['moles', 5], ['ground hogs', 4]]; 
plot1 = $.jqplot('chart', [line1], { 
title:'pieRenderer ',//设置饼状图的标题 
seriesDefaults: {fill: true, 
showMarker: false, 
shadow: false, 
renderer:$.jqplot.PieRenderer, 
rendererOptions:{ 
diameter: undefined, // 设置饼的直径 
padding: 20, // 饼距离其分类名称框或者图表边框的距离,变相该表饼的直径 
sliceMargin: 9, // 饼的每个部分之间的距离 
fill:true, // 设置饼的每部分被填充的状态 
shadow:true, //为饼的每个部分的边框设置阴影,以突出其立体效果 
shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离 
shadowDepth: 5, // 设置阴影区域的深度 
shadowAlpha: 0.07 // 设置阴影区域的透明度 
} 
}, 
legend:{ 
show: true,//设置是否出现分类名称框(即所有分类的名称出现在图的某个位置) 
location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w. 
xoffset: 12, // 分类名称框距图表区域上边框的距离(单位px) 
yoffset: 12, // 分类名称框距图表区域左边框的距离(单位px) 
} 
}); 
}); 
</script> 
</head> 
<body> 
<div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div> 
</body> 
</html>

生成图表展示如下:

jqPlot jquery的页面图表绘制工具

下面是一些其他类型的图标的截图:

1.多纵轴图

jqPlot jquery的页面图表绘制工具

2.带提示信息的甘特图

jqPlot jquery的页面图表绘制工具

3.以table方式展示提示信息的甘特图

jqPlot jquery的页面图表绘制工具

4.带提示信息的线状图(可拖动)

jqPlot jquery的页面图表绘制工具

对于jqPlot功能的具体介绍请关注本文的后续文章——jqPlot的Option配置对象详解。
Javascript 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
js实现图片无缝循环轮播
Oct 28 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 #Javascript
从父页面读取和操作iframe中内容方法
Jul 25 #Javascript
javaScript 数值型和字符串型之间的转换
Jul 25 #Javascript
JavaScript中null与undefined分析
Jul 25 #Javascript
js 字符串操作函数
Jul 25 #Javascript
javaScript Array(数组)相关方法简述
Jul 25 #Javascript
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 #Javascript
You might like
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
PHP扩展开发入门教程
2015/02/26 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python逐行读取文件中内容的简单方法
2019/02/26 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
经典大学生求职信范文
2014/01/06 职场文书
超越自我演讲稿
2014/05/21 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
标准版离职证明书
2014/09/12 职场文书
交通事故协议书范本
2014/11/18 职场文书
力克胡哲观后感
2015/06/10 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
git中cherry-pick命令的使用教程
2022/06/25 Servers