站长网_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: jqPlot 图表中文API使用文档及源码和在线示例
搜索:
您的位置: 主页 > 教程 > 前端设计 > jQuery > » 正文

jqPlot 图表中文API使用文档及源码和在线示例

来源: 易采站长站

简介
jqplot是一款非常不错的基于jquery的图表插件,这篇文章主要帮助大家整理了jqplot的中文使用说明和在线示例及源码下载。jqplot插件在支持HTML5的浏览器上将会在canvas上呈现图表。
引入脚本文件
jqplot需要1.4.3以上的jquery版本支持,刚才说过了,jqplot在支持HTML5 Canvas的浏览器上将以canvas呈现,否则,如果你在IE9以下版本的浏览器上则要引入excanvas.js文件,当然,jqplot的CSS文件也要同时引入,代码如下:
代码如下:
<!–[if lt IE 9]><script language=”javascript” type=”text/javascript” src=”excanvas.js”></script><![endif]–>
<script language=”javascript” type=”text/javascript” src=”jquery.min.js”></script>
<script language=”javascript” type=”text/javascript” src=”jquery.jqplot.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”jquery.jqplot.css” />

添加一个plot容器
我们可以在页面上为jqplot添加一个容器,比如div,但要注意的是,要为这个div容器指定宽度好高度,如下代码:
<div id=”chartdiv” style=”height:400px;width:300px; “></div>
开始创建plot图表
接下来我们在上面创建好的容器中通过调用$.jqplot实现图表的生成和渲染,比如如果用下面的数据来初始化jqplot图表:
$.jqplot(‘chartdiv’, [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
最终显示效果如下图所示:

jqplot属性选项
我们在调用$.jqplot时可以传入一些参数options来自定义jqplot,部分参数options如下:
代码如下:
seriesColors: [ “#4bb2c5”, “#c5b47f”, “#EAA228”, “#579575”, “#839557”, “#958c12”,
“#953579”, “#4b5de4”, “#d8b83f”, “#ff5800”, “#0085cc”], // 默认显示的分类颜色,如果分类的数量超过这里的颜色数量,
// 则从该队列中第一个位置开始重新取值赋给相应的分类
stackSeries: false, // 如果置为true并且有多个分类(如果是折线图,就必须多于一条折线), 那么每个分类(折线)
//在纵轴上的值为其前所有分类纵轴值总和与其纵,轴值相加值
title: ”, //设置当前图的标题
title: {
text: ”, //设置当前图的标题
show: true,//设置当前图的标题是否显示
},
axesDefaults: {
show: false, 是否自动显示坐标轴。
min: null, 横(纵)轴最小刻度值
max: null, 横(纵)轴最大刻度值

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -