bob体育官方平台
jqPlot 图表中文API使用文档及源码和在线示例

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

简介

第二步,增加一个图表展示区域的容器 复制代码 代码如下:

jqplot是一款非常不错的基于jquery的图表插件,这篇文章主要帮助大家整理了jqplot的中文使用说明和在线示例及源码下载。jqplot插件在支持HTML5的浏览器上将会在canvas上呈现图表。

第三步,获取数据 复制代码 代码如下: 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, // 分类名称框距图表区域上边框的距离 yoffset: 12, // 分类名称框距图表区域左边框的距离; 完整的代码如下: 复制代码 代码如下:

引入脚本文件

Simple Test

jqplot需要1.4.3以上的jquery版本支持,刚才说过了,jqplot在支持HTML5 Canvas的浏览器上将以canvas呈现,否则,如果你在IE9以下版本的浏览器上则要引入excanvas.js文件,当然,jqplot的CSS文件也要同时引入,代码如下:

生成图表展示如下:

复制代码 代码如下:

de life" alt="jqPlot——基于jquery的页面图表绘制工具 - gaoyusi - My code life" src=";

<!--[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容器

1.多纵轴图

我们可以在页面上为jqplot添加一个容器,比如div,但要注意的是,要为这个div容器指定宽度好高度,如下代码:

de life" alt="jqPlot——基于jquery的页面图表绘制工具 - gaoyusi - My code life" src=";

<div id="chartdiv" style="height:400px;width:300px; "></div>

2.带提示信息的甘特图

开始创建plot图表

de life" alt="jqPlot——基于jquery的页面图表绘制工具 - gaoyusi - My code life" src=";

接下来我们在上面创建好的容器中通过调用$.jqplot实现图表的生成和渲染,比如如果用下面的数据来初始化jqplot图表:

返回顶部