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 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
vue首次渲染全过程
Apr 21 Vue.js
测量JavaScript函数的性能各种方式对比
Apr 27 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中call_user_func函数使用注意事项
2014/11/21 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
9个比较实用的php代码片段
2016/03/15 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
python 获取字典键值对的实现
2020/11/12 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
Weblogic的布署方式
2013/08/23 面试题
教师一帮一活动总结
2014/07/08 职场文书
工程部经理岗位职责
2015/02/02 职场文书
社区母亲节活动总结
2015/02/10 职场文书
党支部审查意见
2015/06/02 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python