zoukankan      html  css  js  c++  java

  • 图widget--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="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="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="800px;height:400px;"></div>  
    109.     </body>  
    110. </html> 

    版权声明：本文博客原创文章，博客，未经同意，不得转载。
  • 相关阅读:
    Java学习：Scanner类
    Java学习：Object类
    js 方法
    ToDictionary
    goto
    删除多列同时重复数据
    linq中使用case when
    sql 学习笔记
    VS2012发布网站详细步骤
    由于权限不足而无法读取配置文件出现的HTTP 500.19解决办法
  • 原文地址：https://www.cnblogs.com/mfrbuaa/p/4647655.html
Copyright © 2011-2022 走看看