首页 > 代码库 > 图表插件--jqplot简单示例及参数说明

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

2024-07-23 04:57:28   225人阅读

最简陋的线形图

第一步：引入必要的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. });  

第四步：查看效果

第五步：常见问题
  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. }  

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

完整代码

目录结构：

完整代码：
[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=http://www.mamicode.com/"js/jqPlot/1.0.4/excanvas.js"></script>  
  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简单示例及参数说明


联系
我们