码迷，mamicode.com
首页 > 其他好文 > 详细

图表插件--jqplot简单示例及参数说明

时间：2014-09-18 16:32:34      阅读：311      评论：0      收藏：0      [点我收藏+]

标签：jqplot

最简陋的线形图

第一步：引入必要的CSS、JS文件
[html] view plaincopy
  1. <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/>  
  2. <!-- excanvas.js用于兼容IE浏览器 -->  
  3. <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js">  
  4. <!-- jQuery库，此处引用自百度api库 -->  
  5. <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>  
  6. <!-- jqPlot自身支持文件，不带有min的为未压缩版 -->  
  7. <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script>  
  8. <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script>  
  9. <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script>  

第二步：在body中准备要绘制图表的节点
[html] view plaincopy
  1. <!-- 用于绘制图表，id在JS代码中会用到 -->  
  2. <div id="chart1" style="width:300px;height:300px;"></div>  

第三步：编写JS代码，绘制图表
[javascript] view plaincopy
  1. $(function(){  
  2.     /** 
  3.      * 第一个参数为body中div的id值 
  4.      * 第二个参数为要绘制的线形图中各拐点的取值 
  5.      * */  
  6.      var plot = $.jqplot(‘chart1‘, [[3,7,9,1,4,6,8,2,5]]);  
  7. });  

第四步：查看效果
bubuko.com,布布扣
第五步：常见问题
  1. Uncaught ReferenceError: jQuery is not defined【检查是否引入了jQuery库，或者jQuery库是否在其他JS文件之前被引入。】
  1. Uncaught TypeError: Cannot read property ‘msie‘ of undefined【检查jQuery库版本是否为2.X，尝试降低jQuery库版本，但不能低于1.4版本】
  1. Uncaught No Data 【检查JS代码，第二个参数是否为二维数组，如果不是，则报此异常】
至此，我们就完成了最简陋的图表绘制。后面我们可以做出更为复杂的图表，但都是基于以上步骤，除JS代码不同外，没有什么区别。故，接下来的重点将放在JS代码上，其它步骤，不做赘述。

配置图表属性

jqPlot提供很多的属性可以设置，通过不同的属性，图表可以展现出各式各样的外观。和其它jQuery插件类似，jqPlot的配置也是采用js的对象作为参数传递。因此，如果我们要给图表添加一些额外的属性，JS代码应该如下：
[javascript] view plaincopy
  1. var plot = $.jqplot(‘chart1‘, [[3,7,9,1,4,6,8,2,5]], {  
  2.     // 配置属性代码  
  3. });  
所有的属性配置都将以键值对的形式出现在{}之间。
图表作为一种常见的数据表现形式，尤其是线形图表，它具有一定的属性对象，包括但不限于以下几种：
  • 标题；
  • 坐标轴，又分为X轴、Y轴；
  • 数据序列；
  • 图例；
  • 背景；
  • 光标，如鼠标经过数据拐点时，提示该点具体数值。
其中以上每一条都可以作为单独的对象，并衍生出更多的属性。以标题为例，标题可以包含文本、字体、颜色、对齐方式等属性。这些对象和属性，都可以作为一个总的配置对象，传递给jqPlot，以便使jqPlot能够更加精准的绘制图表。从最外层来看，第三个配置属性的参数应该是如下结构：
[javascript] view plaincopy
  1. {  
  2.     title:{ // 标题属性  
  3.     },  
  4.     axesDefaults:{ // 默认坐标轴属性   
  5.     },  
  6.     axes:{ // 具体坐标轴属性  
  7.     }  
  8.     legend:{ // 图例属性  
  9.     },  
  10.     grid:{ // 背景网格属性   
  11.     },  
  12.     seriesDefaults:{// 默认数据序列属性  
  13.     },  
  14.     series:{ // 具体数据序列属性  
  15.     },  
  16.     legend:{ // 图例属性  
  17.     },  
  18.     cursor:{ // 光标属性  
  19.     }  
  20. }  

进而深入到具体属性的配置，以标题为例，结构如下：
[javascript] view plaincopy
  1. title:{ // 标题属性  
  2.     text:‘图表标题‘, // 标题文本  
  3.     show:true, // 是否阴影  
  4.     fontFamily:‘微软雅黑‘, // 标题字体   
  5.     fontSize:14, // 标题字体大小  
  6.     textAlign:‘center‘, // 标题对齐方式  
  7.     textColor:‘red‘, // 标题颜色（也可以写作属性color）  
  8.     escapeHtml:false // 是否转义HTML字符，值为false时，可以在text属性中使用HTML代码  
  9. }  

其它如legend、grid、series等也是类似结构，具体可以配置属性列表，可以参考http://www.jqplot.com/docs/files/jqPlotOptions-txt.html。

带有其它设置的图表

有了之前对jqPlot图表的了解，我们就可以绘制出更为复杂些的图表。示例如下：
[javascript] view plaincopy
  1. $(function(){  
  2.     /** 
  3.      * 第一个参数为body中div的id值 
  4.      * 第二个参数为要绘制的线形图中各拐点的取值 
  5.      * */  
  6.     var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4,  
  7.                  12, 6, 47, 15, 24, 39, 16, 48, 5, 6,  
  8.                  6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3],  
  9.                 [45, 24, 24, 29, 3, 19, 32, 45, 41, 8,  
  10.                  34, 17, 1, 45, 37, 47, 34, 30, 31, 10,  
  11.                  29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49],  
  12.                 [43, 23, 37, 12, 26, 11, 29, 29, 22, 27,  
  13.                  25, 5, 18, 34, 20, 3, 8, 16, 41, 19,  
  14.                  9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13]  
  15.                ];  
  16.                      
  17.     var plot = $.jqplot(‘chart1‘, data, {  
  18.         title:{         // 标题属性  
  19.             text:‘<div class="chart-title">2014年5月广告位投放数量趋势图<div>‘,         // 标题文本  
  20.             show:true,              // 是否阴影  
  21.             fontFamily:‘微软雅黑‘,  // 标题字体   
  22.             fontSize:14,            // 标题字体大小  
  23.             textAlign:‘left‘,       // 标题对齐方式  
  24.             textColor:‘#515151‘,    // 标题颜色（也可以写作属性color）  
  25.             escapeHtml:false        // 是否转义HTML字符，值为false时，可以在text属性中使用HTML代码  
  26.         },  
  27.         axesDefaults:{  // 默认坐标轴属性    
  28.             min:0,  
  29.             tickOptions:{  
  30.                 showMark:false  
  31.             }  
  32.         },  
  33.         axes:{          // 具体坐标轴属性  
  34.             xaxis:{  
  35.                 label:‘日期‘,  
  36.                 ticks:[[1,‘05/01‘], [5,‘05/05‘], [10,‘05/10‘], [15,‘05/15‘], [20,‘05/20‘], [25,‘05/25‘], [30,‘05/30‘]]  
  37.             },  
  38.             yaxis: {  
  39.                 label: ‘投放数量‘  
  40.             }  
  41.         },  
  42.         legend:{        // 图例属性  
  43.             show:true  
  44.         },  
  45.         grid:{          // 背景网格属性   
  46.             borderWidth:1,  
  47.             shadow:false  
  48.         },  
  49.         seriesDefaults:{// 默认数据序列属性  
  50.             lineWidth:1,  
  51.             markerOptions:{  
  52.                 show:true  
  53.             }  
  54.         },  
  55.         series:[        // 具体数据序列属性  
  56.             {  
  57.                 color:‘#FF6666‘,  
  58.                 label:‘CPC‘  
  59.             },{  
  60.                 color:‘#0066CC‘,  
  61.                 label:‘CPT‘  
  62.             },{  
  63.                 color:‘#99CC66‘,  
  64.                 label:‘CPM‘  
  65.             }  
  66.         ],  
  67.         highlighter:{  
  68.             show:true,  
  69.             tooltipAxes:‘y‘,  
  70.             useAxesFormatters:false,  
  71.             tooltipFormatString:‘投放量：%d‘  
  72.         }  
  73.     });  
  74. });  

因为在配置图表的标题（title）时，使用HTML标签，这个标签用了一个chart-title类的CSS，所以要加入如下CSS代码：
[css] view plaincopy
  1. .chart-title{  
  2.     background-color: #999999;  
  3.     margin-bottom: 10px;  
  4.     line-height: 30px;  
  5.     padding-left: 10px;  
  6.     background-color: #efefef;  
  7.     border-bottom:1px solid #dddddd;  
  8.     font-weight: bold;  
  9. }  
  10.                
  11. #chart1{  
  12.     border: 1px solid #dddddd;  
  13. }  

其它部分代码没有改动，此时在页面中查看图表展示效果，如下：
bubuko.com,布布扣

完整代码

目录结构：
bubuko.com,布布扣
完整代码：
[html] view plaincopy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>jqPlot图表Demo</title>  
  6.         <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/>  
  7.         <style type="text/css">  
  8.             .chart-title{  
  9.                 background-color: #999999;  
  10.                 margin-bottom: 10px;  
  11.                 line-height: 30px;  
  12.                 padding-left: 10px;  
  13.                 background-color: #efefef;  
  14.                 border-bottom:1px solid #dddddd;  
  15.                 font-weight: bold;  
  16.             }  
  17.                
  18.             #chart1{  
  19.                 border: 1px solid #dddddd;  
  20.             }  
  21.         </style>  
  22.         <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script><![endif]-->  
  23.         <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>  
  24.         <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script>  
  25.         <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script>  
  26.         <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script>  
  27.         <script src="js/jqPlot/1.0.4/plugins/jqplot.cursor.min.js" type="text/javascript" charset="utf-8"></script>  
  28.         <script src="js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js" type="text/javascript" charset="utf-8"></script>  
  29.         <script type="text/javascript" charset="utf-8">  
  30.             $(function(){  
  31.                 /**  
  32.                  * 第一个参数为body中div的id值  
  33.                  * 第二个参数为要绘制的线形图中各拐点的取值  
  34.                  * */  
  35.                 var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4,  
  36.                              12, 6, 47, 15, 24, 39, 16, 48, 5, 6,  
  37.                              6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3],  
  38.                             [45, 24, 24, 29, 3, 19, 32, 45, 41, 8,  
  39.                              34, 17, 1, 45, 37, 47, 34, 30, 31, 10,  
  40.                              29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49],  
  41.                             [43, 23, 37, 12, 26, 11, 29, 29, 22, 27,  
  42.                              25, 5, 18, 34, 20, 3, 8, 16, 41, 19,  
  43.                              9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13]  
  44.                             ]  
  45.                    
  46.                 var plot = $.jqplot(‘chart1‘, data, {  
  47.                     title:{         // 标题属性  
  48.                         text:‘<div class="chart-title">2014年5月广告位投放数量趋势图<div>‘,           // 标题文本  
  49.                         show:true,              // 是否阴影  
  50.                         fontFamily:‘微软雅黑‘,  // 标题字体   
  51.                         fontSize:14,            // 标题字体大小  
  52.                         textAlign:‘left‘,       // 标题对齐方式  
  53.                         textColor:‘#515151‘,    // 标题颜色（也可以写作属性color）  
  54.                         escapeHtml:false        // 是否转义HTML字符，值为false时，可以在text属性中使用HTML代码  
  55.                     },  
  56.                     axesDefaults:{  // 默认坐标轴属性    
  57.                         min:0,  
  58.                         tickOptions:{  
  59.                             showMark:false  
  60.                         }  
  61.                     },  
  62.                     axes:{          // 具体坐标轴属性  
  63.                         xaxis:{  
  64.                             label:‘日期‘,  
  65.                             ticks:[[1,‘05/01‘], [5,‘05/05‘], [10,‘05/10‘], [15,‘05/15‘], [20,‘05/20‘], [25,‘05/25‘], [30,‘05/30‘]]  
  66.                         },  
  67.                         yaxis: {  
  68.                             label: ‘投放数量‘  
  69.                         }  
  70.                     },  
  71.                     legend:{        // 图例属性  
  72.                         show:true  
  73.                     },  
  74.                     grid:{          // 背景网格属性   
  75.                         borderWidth:1,  
  76.                         shadow:false  
  77.                     },  
  78.                     seriesDefaults:{// 默认数据序列属性  
  79.                         lineWidth:1,  
  80.                         markerOptions:{  
  81.                             show:true  
  82.                         }  
  83.                     },  
  84.                     series:[        // 具体数据序列属性  
  85.                         {  
  86.                             color:‘#FF6666‘,  
  87.                             label:‘CPC‘  
  88.                         },{  
  89.                             color:‘#0066CC‘,  
  90.                             label:‘CPT‘  
  91.                         },{  
  92.                             color:‘#99CC66‘,  
  93.                             label:‘CPM‘  
  94.                         }  
  95.                     ],  
  96.                     highlighter:{  
  97.                         show:true,  
  98.                         tooltipAxes:‘y‘,  
  99.                         useAxesFormatters:false,  
  100.                         tooltipFormatString:‘投放量：%d‘  
  101.                     }  
  102.                 });  
  103.             });  
  104.         </script>  
  105.     </head>  
  106.     <body>  
  107.         <!-- 用于绘制图表，id在JS代码中会用到 -->  
  108.         <div id="chart1" style="width:800px;height:400px;"></div>  
  109.     </body>  
  110. </html> 

图表插件--jqplot简单示例及参数说明

标签：jqplot

原文地址：http://blog.csdn.net/yapian8/article/details/39373683
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！