zoukankan      html  css  js  c++  java

  • 图标插件--jqplot实现柱状图及饼图，表盘图演示样例

    柱状图

    在jqPlot图表插件使用说明（一）中，我们已经能够通过jqPlot绘制出比較简单的线形图。通过查看源码。我们也能够看出，线形图是jqPlot默认的图表类型：
    [javascript] view plaincopy
    1. /** 
    2.  * Class: Series 
    3.  * An individual data series object.  Cannot be instantiated directly, but created 
    4.  * by the Plot oject.  Series properties can be set or overriden by the  
    5.  * options passed in from the user. 
    6.  */  
    7. function Series(options) {  
    8.     // ...其他设置  
    9.     // prop: renderer  
    10.     // A class of a renderer which will draw the series,   
    11.     // see <$.jqplot.LineRenderer>.  
    12.     this.renderer = $.jqplot.LineRenderer;  
    13.     // ...其他设置  
    14. }  

    由上面的源代码也能够看出，jqPlot在设置图表类型时，用到了renderer属性。这个属性是为图表的数据序列设置一个渲染器，渲染器决定怎样渲染图表的数据序列。因此，相应于最简单的线形图，我们仅仅须要设置相应的数据序列渲染器，就能够绘制出最简单的柱状图。完整源代码例如以下：
    [html] view plaincopy
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title>最简单的柱状图</title>  
    6.         <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/>  
    7.         <!--[if lt IE 9]>  
    8.             <script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script>  
    9.         <![endif]-->  
    10.         <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>  
    11.         <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>  
    12.         <!-- jqplot.barRenderer.min.js为$.jqplot.BarRenderer渲染器所在JS文件 -->  
    13.         <script src="js/jqPlot/1.0.4/plugins/jqplot.barRenderer.min.js" type="text/javascript" ></script>  
    14.         <script type="text/javascript" charset="utf-8">  
    15.             $(function(){  
    16.                 $.jqplot('chart1', [[75, 62, 96, 81, 77, 83, 70]], {  
    17.                     seriesDefaults:{  
    18.                         renderer:$.jqplot.BarRenderer   // 设置数据序列渲染器  
    19.                     }  
    20.                 });  
    21.             });  
    22.         </script>  
    23.     </head>  
    24.     <body>  
    25.         <div id="chart1" style=" 800px;height: 400px;">  
    26.             <!-- 
    27.                 描写叙述：图表展示区域 
    28.             -->  
    29.         </div>  
    30.     </body>  
    31. </html>  

    来看一下效果图：

    配置柱状图

    由最简单的线形图加上一些设置后，能够使图表丰富起来。

    相同的。柱状图也能够做一些配置。并且配置的方式与线形图差点儿没有区别。

    再来看一个演示样例：

    [html] view plaincopy
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title>给柱状图配置属性</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]>  
    23.             <script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script>  
    24.         <![endif]-->  
    25.         <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>  
    26.         <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>  
    27.         <!-- jqplot.barRenderer.min.js为$.jqplot.BarRenderer渲染器所在JS文件 -->  
    28.         <script src="js/jqPlot/1.0.4/plugins/jqplot.barRenderer.min.js" type="text/javascript" ></script>  
    29.         <!-- jqplot.categoryAxisRenderer.min.js用于控制X轴标签的展示渲染 -->  
    30.         <script src="js/jqPlot/1.0.4/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript" ></script>  
    31.         <script src="js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js" type="text/javascript"></script>  
    32.         <script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>  
    33.         <script type="text/javascript" charset="utf-8">  
    34.             $(function(){  
    35.                 $.jqplot('chart1', [[75, 62, 96, 81], [46, 82, 70, 92], [58, 33, 82, 88]], {  
    36.                     title:{         // 标题属性  
    37.                         text:'<div class="chart-title">2013年各季度广告位投放数量对照图（非真实数据）<div>',// 标题文本  
    38.                         show:true,              // 是否阴影  
    39.                         fontFamily:'微软雅黑',  // 标题字体   
    40.                         fontSize:14,            // 标题字体大小  
    41.                         textAlign:'left',       // 标题对齐方式  
    42.                         textColor:'#515151',    // 标题颜色（也能够写作属性color）  
    43.                         escapeHtml:false        // 是否转义HTML字符，值为false时，能够在text属性中使用HTML代码  
    44.                     },  
    45.                     seriesDefaults:{  
    46.                         renderer:$.jqplot.BarRenderer,  
    47.                         pointLabels: {  // 显示数据点，依赖于jqplot.pointLabels.min.js文件  
    48.                             show: true  
    49.                         },  
    50.                         showLabel:true  
    51.                     },  
    52.                     series:[        // 详细数据序列属性  
    53.                         {  
    54.                             color:'#FF6666',  
    55.                             label:'CPC'  
    56.                         },{  
    57.                             color:'#0066CC',  
    58.                             label:'CPT'  
    59.                         },{  
    60.                             color:'#99CC66',  
    61.                             label:'CPM'  
    62.                         }  
    63.                     ],  
    64.                     axesDefaults:{  // 默认坐标轴属性    
    65.                         min:0,  
    66.                         tickOptions:{  
    67.                             showMark:false  
    68.                         }  
    69.                     },  
    70.                     axes:{          // 详细坐标轴属性  
    71.                         xaxis:{  
    72.                             renderer: $.jqplot.CategoryAxisRenderer,  
    73.                             ticks:['第一季度', '第二季度', '第三季度', '第四季度'],  
    74.                             label:'季度'  
    75.                         },  
    76.                         yaxis: {  
    77.                             label: '投放数量'  
    78.                         }  
    79.                     },  
    80.                     legend:{        // 图例属性  
    81.                         show:true,  
    82.                         placement: 'outsideGrid' // 设置图例位于图表外部  
    83.                     }  
    84.                 });  
    85.             });  
    86.         </script>  
    87.     </head>  
    88.     <body>  
    89.         <div id="chart1" style=" 800px;height: 400px;">  
    90.             <!-- 
    91.                 描写叙述：图表展示区域 
    92.             -->  
    93.         </div>  
    94.     </body>  
    95. </html>  

    效果例如以下：

    其他图表类型

    图表一般用于展示统计数据结果。提升数据可读性。

    图表能够分为非常多种类型，不同的类型展示的效果不一样。比方线形图的数据以一条曲线展示，而柱状图的数据则以多个柱形展示。不同类型的图表用途也有差别。线形图显然适合展示数据的变化趋势，柱状图则适合用于对数据进行对照，还有饼状图适合观察不同选项占比，等等。

    通过对线形图和柱状图的学习，我们能够联想到。不同类型的图表，在jqPlot中。最大的差异在于渲染器。通过不同的渲染器，我们就能得到不同的展示效果。当然，它们之间也会有一些不同的配置。只是我们都能够通过文档或源代码去查看该怎样配置一个图表。


    以下是一些比較经常使用的图表类型及演示样例代码。

    • 饼状图。饼状图相应的数据序列渲染器为$.jqplot.PieRenderer。与线形图、柱状图不同的是，饼状图的数据格式是一个三维数组。

    [html] view plaincopy
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title>饼状图</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]>  
    23.             <script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script>  
    24.         <![endif]-->  
    25.         <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>  
    26.         <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>  
    27.         <!-- jqplot.pieRenderer.min.js为饼状图渲染器所在JS文件 -->  
    28.         <script src="js/jqPlot/1.0.4/plugins/jqplot.pieRenderer.min.js" type="text/javascript" ></script>  
    29.         <script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>  
    30.         <script type="text/javascript" charset="utf-8">  
    31.             $(function(){  
    32.                 $.jqplot('chart1', [[['活多', 31], ['钱少', 92], ['家远', 50], ['位低', 40], ['权轻', 44], ['任重', 66]]], {  
    33.                     title:{         // 标题属性  
    34.                         text:'<div class="chart-title">不想上班的理由<div>',// 标题文本  
    35.                         show:true,              // 是否阴影  
    36.                         fontFamily:'微软雅黑',  // 标题字体   
    37.                         fontSize:14,            // 标题字体大小  
    38.                         textAlign:'left',       // 标题对齐方式  
    39.                         textColor:'#515151',    // 标题颜色（也能够写作属性color）  
    40.                         escapeHtml:false        // 是否转义HTML字符。值为false时。能够在text属性中使用HTML代码  
    41.                     },  
    42.                     seriesDefaults:{  
    43.                         renderer:$.jqplot.PieRenderer,  
    44.                         rendererOptions:{  
    45.                             showDataLabels:true  
    46.                         },  
    47.                         pointLabels: {  // 显示数据点。依赖于jqplot.pointLabels.min.js文件  
    48.                             show: true  
    49.                         }  
    50.                     },  
    51.                     grid:{  
    52.                         drawBorder:false,  
    53.                         shadow:false,  
    54.                         background:'transparent'  
    55.                     },  
    56.                     legend:{        // 图例属性  
    57.                         show:true,  
    58.                         placement: 'outsideGrid' // 设置图例位于图表外部  
    59.                     }  
    60.                 });  
    61.             });  
    62.         </script>  
    63.     </head>  
    64.     <body>  
    65.         <div id="chart1" style=" 400px;height: 400px;">  
    66.             <!-- 
    67.                 描写叙述：图表展示区域 
    68.             -->  
    69.         </div>  
    70.     </body>  
    71. </html>  
    效果图：
    • 环形图。环形图与饼状图的差别仅仅是在于渲染器的不同。仅仅须要将与饼状图渲染器有关的代码。改动为环形图相应的渲染器代码。就能够将一个饼状图转变为环形图。环形图渲染器为$.jqplot.DonutRenderer，以下是完整的环形图演示样例代码：
    [html] view plaincopy
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title>环形图</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]>  
    23.             <script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script>  
    24.         <![endif]-->  
    25.         <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>  
    26.         <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>  
    27.         <!-- jqplot.donutRenderer.min.js为环形图渲染器所在JS文件 -->  
    28.         <script src="js/jqPlot/1.0.4/plugins/jqplot.donutRenderer.min.js" type="text/javascript" ></script>  
    29.         <script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>  
    30.         <script type="text/javascript" charset="utf-8">  
    31.             $(function(){  
    32.                 $.jqplot('chart1', [[['活多', 31], ['钱少', 92], ['家远', 50], ['位低', 40], ['权轻', 44], ['任重', 66]]], {  
    33.                     title:{         // 标题属性  
    34.                         text:'<div class="chart-title">不想上班的理由<div>',// 标题文本  
    35.                         show:true,              // 是否阴影  
    36.                         fontFamily:'微软雅黑',  // 标题字体   
    37.                         fontSize:14,            // 标题字体大小  
    38.                         textAlign:'left',       // 标题对齐方式  
    39.                         textColor:'#515151',    // 标题颜色（也能够写作属性color）  
    40.                         escapeHtml:false        // 是否转义HTML字符，值为false时，能够在text属性中使用HTML代码  
    41.                     },  
    42.                     seriesDefaults:{  
    43.                         renderer:$.jqplot.DonutRenderer,  
    44.                         rendererOptions:{  
    45.                             showDataLabels:true  
    46.                         },  
    47.                         pointLabels: {  // 显示数据点，依赖于jqplot.pointLabels.min.js文件  
    48.                             show: true  
    49.                         }  
    50.                     },  
    51.                     grid:{  
    52.                         drawBorder:false,  
    53.                         shadow:false,  
    54.                         background:'transparent'  
    55.                     },  
    56.                     legend:{        // 图例属性  
    57.                         show:true,  
    58.                         placement: 'outsideGrid' // 设置图例位于图表外部  
    59.                     }  
    60.                 });  
    61.             });  
    62.         </script>  
    63.     </head>  
    64.     <body>  
    65.         <div id="chart1" style=" 400px;height: 400px;">  
    66.             <!-- 
    67.                 描写叙述：图表展示区域 
    68.             -->  
    69.         </div>  
    70.     </body>  
    71. </html>  
    效果图：
    • 仪表盘。

      仪表盘的数据序列仅仅有一个数值，用于指示指针所在位置。仪表盘数据序列的渲染器位于jqplot.meterGaugeRenderer.min.js文件里，为$.jqplot.MeterGaugeRenderer。来看完整的仪表盘图表代码：

    [html] view plaincopy
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title>仪表盘</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]>  
    23.             <script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script>  
    24.         <![endif]-->  
    25.         <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>  
    26.         <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>  
    27.         <!-- jqplot.meterGaugeRenderer.min.js为仪表盘渲染器JS文件 -->  
    28.         <script src="js/jqPlot/1.0.4/plugins/jqplot.meterGaugeRenderer.min.js" type="text/javascript" ></script>  
    29.         <script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>  
    30.         <script type="text/javascript" charset="utf-8">  
    31.             $(function(){  
    32.                 $.jqplot('chart1', [[75]], {  
    33.                     title:{         // 标题属性  
    34.                         text:'<div class="chart-title">当前行驶速度<div>',// 标题文本  
    35.                         show:true,              // 是否阴影  
    36.                         fontFamily:'微软雅黑',  // 标题字体   
    37.                         fontSize:14,            // 标题字体大小  
    38.                         textAlign:'left',       // 标题对齐方式  
    39.                         textColor:'#515151',    // 标题颜色（也能够写作属性color）  
    40.                         escapeHtml:false        // 是否转义HTML字符，值为false时。能够在text属性中使用HTML代码  
    41.                     },  
    42.                     seriesDefaults:{  
    43.                         renderer: $.jqplot.MeterGaugeRenderer,// 仪表盘渲染器  
    44.                         rendererOptions:{  
    45.                             showDataLabels:true,  
    46.                             min:0,  
    47.                             max:120,  
    48.                             labelHeightAdjust:-5,  
    49.                             ticks: [0, 20, 40, 60, 80, 100, 120],  
    50.                             labelPosition:'bottom',  
    51.                             intervals:[40, 80, 120],   //取2,3,4这三个刻度值作为分隔线；该值的取定须參照表盘刻度值范围而定  
    52.                             intervalColors:['#66cc66', '#E7E658', '#cc6666'],  //分别为上面分隔的域指定表示的颜色  
    53.                             label: '时速：公里/小时'  
    54.                                
    55.                         }  
    56.                     },  
    57.                     grid:{  
    58.                         drawBorder:false,  
    59.                         shadow:false,  
    60.                         background:'transparent'  
    61.                     }  
    62.                 });  
    63.             });  
    64.         </script>  
    65.     </head>  
    66.     <body>  
    67.         <div id="chart1" style=" 400px;height: 400px;">  
    68.             <!-- 
    69.                 描写叙述：图表展示区域 
    70.             -->  
    71.         </div>  
    72.     </body>  
    73. </html>  
    效果图：
  • 相关阅读:
    C/C++多文件之间的变量定义
    PKU POJ 2186 Popular Cows 强连通分量
    重载函数
    ZOJ 2763 Prison Break
    201357 训练赛总结
    hdu 4467 Graph 构造
    201356 训练赛总结
    201353 NEERC 2012, Eastern subregional contest
    2013512 CF 183 总结
    一道动态规划
  • 原文地址：https://www.cnblogs.com/llguanli/p/7260109.html
Copyright © 2011-2022 走看看