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>  
    效果图：
  • 相关阅读:
    [分享] Knockout.js 体验之旅
    [分享] 用NodeJs做一个小爬虫,附源码！
    [分享] 纯CSS完美实现垂直水平居中的6种方式
    [分享] 来，做一个问卷调查（有抽奖！）
    除非你是BAT,前端开发中最好少造轮子
    [分享] 微信支付中商户对个人用户付款案例
    30分钟做一个二维码名片应用，有源码！
    【分享】WeX5的正确打开方式（7）——数据组件详解
    基于phonegap，html5，ratchet，handlebars等技术的微表情APP
    html5实现web app摇一摇换歌
  • 原文地址：https://www.cnblogs.com/llguanli/p/7260109.html
Copyright © 2011-2022 走看看