jqPlot图表插件使用说明(一)
2019独角兽企业重金招聘Python工程师标准>>>
最简陋的线形图
第一步:引入必要的CSS、JS文件
<link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/>
<!-- excanvas.js用于兼容IE浏览器 -->
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js">
<!-- jQuery库,此处引用自百度api库 -->
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<!-- jqPlot自身支持文件,不带有min的为未压缩版 -->
<script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script>
第二步:在body中准备要绘制图表的节点
<!-- 用于绘制图表,id在JS代码中会用到 -->
<div id="chart1" style="width:300px;height:300px;"></div>
第三步:编写JS代码,绘制图表
$(function(){/*** 第一个参数为body中div的id值* 第二个参数为要绘制的线形图中各拐点的取值* */var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
第四步:查看效果
第五步:常见问题
Uncaught ReferenceError: jQuery is not defined【检查是否引入了jQuery库,或者jQuery库是否在其他JS文件之前被引入。】
Uncaught TypeError: Cannot read property 'msie' of undefined【检查jQuery库版本是否为2.X,尝试降低jQuery库版本,但不能低于1.4版本,不能高于1.8版本。】
Uncaught No Data 【检查JS代码,第二个参数是否为二维数组,如果不是,则报此异常】
至此,我们就完成了最简陋的图表绘制。后面我们可以做出更为复杂的图表,但都是基于以上步骤,除JS代码不同外,没有什么区别。故,接下来的重点将放在JS代码上,其它步骤,不做赘述。
配置图表属性
jqPlot提供很多的属性可以设置,通过不同的属性,图表可以展现出各式各样的外观。和其它jQuery插件类似,jqPlot的配置也是采用js的对象作为参数传递。因此,如果我们要给图表添加一些额外的属性,JS代码应该如下:
var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]], {// 配置属性代码
});
所有的属性配置都将以键值对的形式出现在{}之间。
图表作为一种常见的数据表现形式,尤其是线形图表,它具有一定的属性对象,包括但不限于以下几种:
标题;
坐标轴,又分为X轴、Y轴;
数据序列;
图例;
背景;
光标,如鼠标经过数据拐点时,提示该点具体数值。
其中以上每一条都可以作为单独的对象,并衍生出更多的属性。以标题为例,标题可以包含文本、字体、颜色、对齐方式等属性。这些对象和属性,都可以作为一个总的配置对象,传递给jqPlot,以便使jqPlot能够更加精准的绘制图表。从最外层来看,第三个配置属性的参数应该是如下结构:
{title:{ // 标题属性},axesDefaults:{ // 默认坐标轴属性 },axes:{ // 具体坐标轴属性}legend:{ // 图例属性},grid:{ // 背景网格属性 },seriesDefaults:{// 默认数据序列属性},series:{ // 具体数据序列属性},legend:{ // 图例属性},cursor:{ // 光标属性}
}
进而深入到具体属性的配置,以标题为例,结构如下:
title:{ // 标题属性text:'图表标题', // 标题文本show:true, // 是否阴影fontFamily:'微软雅黑', // 标题字体 fontSize:14, // 标题字体大小textAlign:'center', // 标题对齐方式textColor:'red', // 标题颜色(也可以写作属性color)escapeHtml:false // 是否转义HTML字符,值为false时,可以在text属性中使用HTML代码
}
其它如legend、grid、series等也是类似结构,具体可以配置属性列表,可以参考http://www.jqplot.com/docs/files/jqPlotOptions-txt.html。
带有其它设置的图表
有了之前对jqPlot图表的了解,我们就可以绘制出更为复杂些的图表。示例如下:
$(function(){/*** 第一个参数为body中div的id值* 第二个参数为要绘制的线形图中各拐点的取值* */var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4,12, 6, 47, 15, 24, 39, 16, 48, 5, 6,6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3],[45, 24, 24, 29, 3, 19, 32, 45, 41, 8,34, 17, 1, 45, 37, 47, 34, 30, 31, 10,29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49],[43, 23, 37, 12, 26, 11, 29, 29, 22, 27,25, 5, 18, 34, 20, 3, 8, 16, 41, 19,9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13]];var plot = $.jqplot('chart1', data, {title:{ // 标题属性text:'<div class="chart-title">2014年5月广告位投放数量趋势图<div>', // 标题文本show:true, // 是否阴影fontFamily:'微软雅黑', // 标题字体 fontSize:14, // 标题字体大小textAlign:'left', // 标题对齐方式textColor:'#515151', // 标题颜色(也可以写作属性color)escapeHtml:false // 是否转义HTML字符,值为false时,可以在text属性中使用HTML代码},axesDefaults:{ // 默认坐标轴属性 min:0,tickOptions:{showMark:false}},axes:{ // 具体坐标轴属性xaxis:{label:'日期',ticks:[[1,'05/01'], [5,'05/05'], [10,'05/10'], [15,'05/15'], [20,'05/20'], [25,'05/25'], [30,'05/30']]},yaxis: {label: '投放数量'}},legend:{ // 图例属性show:true},grid:{ // 背景网格属性 borderWidth:1,shadow:false},seriesDefaults:{// 默认数据序列属性lineWidth:1,markerOptions:{show:true}},series:[ // 具体数据序列属性{color:'#FF6666',label:'CPC'},{color:'#0066CC',label:'CPT'},{color:'#99CC66',label:'CPM'}],highlighter:{show:true,tooltipAxes:'y',useAxesFormatters:false,tooltipFormatString:'投放量:%d'}});
});
因为在配置图表的标题(title)时,使用HTML标签,这个标签用了一个chart-title类的CSS,所以要加入如下CSS代码:
.chart-title{background-color: #999999;margin-bottom: 10px;line-height: 30px;padding-left: 10px;background-color: #efefef;border-bottom:1px solid #dddddd;font-weight: bold;
}#chart1{border: 1px solid #dddddd;
}
其它部分代码没有改动,此时在页面中查看图表展示效果,如下:
完整代码
目录结构:
完整代码:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>jqPlot图表Demo</title><link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/><style type="text/css">.chart-title{background-color: #999999;margin-bottom: 10px;line-height: 30px;padding-left: 10px;background-color: #efefef;border-bottom:1px solid #dddddd;font-weight: bold;}#chart1{border: 1px solid #dddddd;}</style><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script><![endif]--><script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script><script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jqPlot/1.0.4/plugins/jqplot.cursor.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">$(function(){/*** 第一个参数为body中div的id值* 第二个参数为要绘制的线形图中各拐点的取值* */var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4,12, 6, 47, 15, 24, 39, 16, 48, 5, 6,6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3],[45, 24, 24, 29, 3, 19, 32, 45, 41, 8,34, 17, 1, 45, 37, 47, 34, 30, 31, 10,29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49],[43, 23, 37, 12, 26, 11, 29, 29, 22, 27,25, 5, 18, 34, 20, 3, 8, 16, 41, 19,9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13]]var plot = $.jqplot('chart1', data, {title:{ // 标题属性text:'<div class="chart-title">2014年5月广告位投放数量趋势图<div>', // 标题文本show:true, // 是否阴影fontFamily:'微软雅黑', // 标题字体 fontSize:14, // 标题字体大小textAlign:'left', // 标题对齐方式textColor:'#515151', // 标题颜色(也可以写作属性color)escapeHtml:false // 是否转义HTML字符,值为false时,可以在text属性中使用HTML代码},axesDefaults:{ // 默认坐标轴属性 min:0,tickOptions:{showMark:false}},axes:{ // 具体坐标轴属性xaxis:{label:'日期',ticks:[[1,'05/01'], [5,'05/05'], [10,'05/10'], [15,'05/15'], [20,'05/20'], [25,'05/25'], [30,'05/30']]},yaxis: {label: '投放数量'}},legend:{ // 图例属性show:true},grid:{ // 背景网格属性 borderWidth:1,shadow:false},seriesDefaults:{// 默认数据序列属性lineWidth:1,markerOptions:{show:true}},series:[ // 具体数据序列属性{color:'#FF6666',label:'CPC'},{color:'#0066CC',label:'CPT'},{color:'#99CC66',label:'CPM'}],highlighter:{show:true,tooltipAxes:'y',useAxesFormatters:false,tooltipFormatString:'投放量:%d'}});});</script></head><body><!-- 用于绘制图表,id在JS代码中会用到 --><div id="chart1" style="width:800px;height:400px;"></div></body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。
转载于:https://my.oschina.net/treenewbee/blog/489942
jqPlot图表插件使用说明(一)相关推荐
- 如何设置 jqplot 图表插件的标题图例和直线
好, 我想大部分朋友都已经有回到了让人痛苦的办公桌上, 给大家带来我攒好的一篇文章, 关于 jqplot 的标题, 图例和直线的设置. 本文将详细的讲解如何设置 Plot 图表的标题, 图例和序列, ...
- 如何设置 jqplot 图表插件的轴和网格
春节即将到来, 这是节前的最后一篇, 来说明下 jqplot 的轴和网格的设置. 请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码, 目录 /plot/Def ...
- 一款可定制的外国jQuery图表插件jqplot
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 用法: 1.引入jQuery类库和相 ...
- 6款jQuery图表插件
图表应用能让数据显示更加直观易懂,但光靠CSS +Xhtml 或纯图片实现的图表显然有很多局限性,强大的jquery 让我们可以实现各种很强大的图表,下面是6款jQuery图表插件 ,另外,你也许也愿 ...
- 10款免费开源图表插件推荐
1.ichartjs(国产) ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业于南昌大学软件工程专业. ichartjs 是一款基于HTML5的图形库.使用纯javasc ...
- ECharts 图表插件使用整理(图表配置实现)
ECharts 图表插件使用整理 说明 ECharts 是一个 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器 IE 8 以上,是一个可高度个性化定制的数据可视化图表 ECharts ...
- 推荐10款免费而优秀的图表插件
推荐10款免费而优秀的图表插件 开发人员很多时候需要使用图表来表现一些数据,而一张图表往往能够比几行密密麻麻的数字表格更能直观地展示数据内容.随着Web技术的发展,从传统只能依靠于flash.IE的v ...
- 推荐几个web中常用js图表插件
推荐几个web中常用js图表插件 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart ...
- JQuery图表插件之Flot
Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点.目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ an ...
最新文章
- Android中实现Bitmap在自定义View中的放大与拖动
- Fleury算法找欧拉环游
- java五子棋以当前空位为中心 取9个点_java 五子棋有点问题,哪位帮忙破一下、、...
- ElasticSearch服务器操作命令
- 深信服上网管理设备基本操作
- html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码
- 《零基础》MySQL 数据类型(八)
- 10个给程序员的建议
- 正则表达式 蛮全的!
- 如何一个动态创建对象?
- 优秀!5部顶级数学纪录片,假期看剧涨知识必备!
- 商品管理查询分类下的所有子类目
- C++判断一个数是否是质数(极简版)
- Apple 850 订单EDI X12报文格式解析
- navicat连接数据库出错,但是SQLyog可以正常连接
- hand crafted feature:histogram(直方图)
- 多智能体协同控制(从零开始)(一)
- 关于优化公式的小白理解
- 你打英雄联盟or王者荣耀为什么老是匹配到怨种队友,进来看
- 2021年中国DR设备市场竞争格局分析,未来DR市场将进入发展平台期「图」
热门文章
- 复制不用说yes的方法
- word 段显示在页面最下方_Word你说的白是什么白
- 二叉树的基本操作(c语言)
- Numpy常用函数的简单记录
- 2021下半年软考各省准考证打印时间
- 《系统集成项目管理工程师》必背100个知识点-88系统集成项目收尾管理工作
- Geoserver中调整polygon图层的填充颜色透明度
- Vue+Leaflet实现加载Stamen显示地图
- CentOS6.9中使用yum install时提示:Cannot find a valid baseurl for repo: centos-sclo-rh
- Xftp连接到Linux服务器时提示连接失败的配置