柱状图

在jqPlot图表插件使用说明(一)中,我们已经能够通过jqPlot绘制出比較简单的线形图。通过查看源码。我们也能够看出,线形图是jqPlot默认的图表类型:
  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属性。这个属性是为图表的数据序列设置一个渲染器,渲染器决定怎样渲染图表的数据序列。因此,相应于最简单的线形图,我们仅仅须要设置相应的数据序列渲染器,就能够绘制出最简单的柱状图。完整源代码例如以下:

  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="width: 800px;height: 400px;">
  26. <!--
  27. 描写叙述:图表展示区域
  28. -->
  29. </div>
  30. </body>
  31. </html>

来看一下效果图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFuZzE5ODgwNzIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

配置柱状图

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

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

再来看一个演示样例:

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

效果例如以下:


其他图表类型

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

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

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


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

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

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

效果图:

  • 仪表盘。

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

  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. #chart1{
  18. border: 1px solid #dddddd;
  19. }
  20. </style>
  21. <!--[if lt IE 9]>
  22. <script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script>
  23. <![endif]-->
  24. <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  25. <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>
  26. <!-- jqplot.meterGaugeRenderer.min.js为仪表盘渲染器JS文件 -->
  27. <script src="js/jqPlot/1.0.4/plugins/jqplot.meterGaugeRenderer.min.js" type="text/javascript" ></script>
  28. <script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>
  29. <script type="text/javascript" charset="utf-8">
  30. $(function(){
  31. $.jqplot('chart1', [[75]], {
  32. title:{         // 标题属性
  33. text:'<div class="chart-title">当前行驶速度<div>',// 标题文本
  34. show:true,              // 是否阴影
  35. fontFamily:'微软雅黑',  // 标题字体
  36. fontSize:14,            // 标题字体大小
  37. textAlign:'left',       // 标题对齐方式
  38. textColor:'#515151',    // 标题颜色(也能够写作属性color)
  39. escapeHtml:false        // 是否转义HTML字符,值为false时。能够在text属性中使用HTML代码
  40. },
  41. seriesDefaults:{
  42. renderer: $.jqplot.MeterGaugeRenderer,// 仪表盘渲染器
  43. rendererOptions:{
  44. showDataLabels:true,
  45. min:0,
  46. max:120,
  47. labelHeightAdjust:-5,
  48. ticks: [0, 20, 40, 60, 80, 100, 120],
  49. labelPosition:'bottom',
  50. intervals:[40, 80, 120],   //取2,3,4这三个刻度值作为分隔线;该值的取定须參照表盘刻度值范围而定
  51. intervalColors:['#66cc66', '#E7E658', '#cc6666'],  //分别为上面分隔的域指定表示的颜色
  52. label: '时速:公里/小时'
  53. }
  54. },
  55. grid:{
  56. drawBorder:false,
  57. shadow:false,
  58. background:'transparent'
  59. }
  60. });
  61. });
  62. </script>
  63. </head>
  64. <body>
  65. <div id="chart1" style="width: 400px;height: 400px;">
  66. <!--
  67. 描写叙述:图表展示区域
  68. -->
  69. </div>
  70. </body>
  71. </html>
效果图:

图标插件--jqplot实现柱状图及饼图,表盘图演示样例的更多相关文章

  1. 01_MUI之Boilerplate中:HTML5演示样例,动态组件,自己定义字体演示样例,自己定义字体演示样例,图标字体演示样例

     1安装HBuilder5.0.0,安装后的界面截图例如以下: 2 依照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上 ...

  2. Grunt经常使用插件及演示样例说明

    下述给出了经常使用Grunt插件,并列举了部分插件演示样例: 插件名称 说明 Github地址 grunt-contrib-clean 清空文件和目录 https://github.com/grunt ...

  3. AppCan移动应用开发平台新增9个超有用插件(内含演示样例代码)

    使用AppCan平台进行移动开发.你所须要具备的是Html5+CSS +JS前端语言基础.此外.Hybrid混合模式应用还需结合原生语言对功能模块进行封装,对于没有原生基础的开发人员,怎样实现App里 ...

  4. 图表插件--jqplot交互演示样例

    简单交互 在之前的学习中,我们已经能够绘制各种类型的图表,也能够给图表加入不同的组件,如标题.图例等等.但这些图表仅仅能用于展示数据,一旦希望对图表有所操作--比方查看数据明细--就显得束手无策了.事 ...

  5. Web前端图表绘制JQuery插件jqplot

    在此之前使用了Chart.js.Highcharts,首先了解一下这两款插件的优势与不足,然后再来了解jqplot. 1.Chart Chart中文官网:http://chartjs.cn/ 1.1优 ...

  6. Jquery的画图插件-jqPlot+

    JqPlot(个人和商业都免费) http://yunpan.cn/Q7Yh5dUNPjtak  提取码 3653 下面开始制作一个柱状图: ----------------------------我 ...

  7. jQuery插件jqplot的详细配置说明和渲染器

    jQuery插件jqplot的详细配置说明和渲染器 (2012-08-23 08:57:42) 转载▼ 标签: jqplot 详细配置 渲染器 it 分类: 技术类 jQuery.jqplot插件的官 ...

  8. 一款可定制的外国jQuery图表插件jqplot

    jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 用法: 1.引入jQuery类库和相 ...

  9. 在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图

    开发背景: 今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. 首 ...

随机推荐

  1. item-设置可见性

    如果我们想要设置menu中item的可见行,有两种方式: 1.直接在menu的xml代码中设置 <menu> <item android:id="@+id/action_h ...

  2. teamviewer连接不上的原因及解决方法有哪些

    teamviewer连接不上的原因及解决方法有哪些 一.总结 一句话总结:这里说的就是版本问题,高版本可以连接低版本,低版本无法连接高版本. 1.TeamViewer官方检测使用环境是否为商用的标准是 ...

  3. hbs模板(zmaze ui用的)

    hbs模板(zmaze ui用的) 一.总结 1.模板引擎:就是来生成界面的啊,只不过实现了view和数据分离以及一些其它的功能(预加载等). 2.Handlebars :但他是一个单纯的模板引擎,在 ...

  4. OpenAL音频播放

    // // OpenALPlayer.m // live // // Created by lujunjie on 2016/11/5. // Copyright © 2016年 lujunjie. ...

  5. SqlMapConfig.xml全局配置文件解析(mybatis)

    原文  http://www.cnblogs.com/selene/p/4607004.html 一:SqlMapConfig.xml配置文件的内容和配置顺序如下 properties(属性) set ...

  6. [转]DOM0,DOM2,DOM3事件处理方式区别

    转 DOM0,DOM2,DOM3事件处理方式区别 2016年07月13日 15:00:29 judyge 阅读数:1457更多 个人分类: js与前端   引子:        文档对象模型是一种与编 ...

  7. EventWaitHandle

    在查资料的过程中,我突然想到一个类:EventWaitHandle,也就是本文的主角. 这个类通过在线程之间设置信号量,可以非常方便的控制线程运行的顺序.具体代码如下: 首先全局申明: EventWa ...

  8. STL_算法_删除(unique、unique_copy)

    C++ Primer 学习中. . . 简单记录下我的学习过程 (代码为主) 全部容器适用 unique(b,e) unique(b,e,p) unique_copy(b1,e1,b2) unique ...

  9. CentOS 6 通过DVD快速建立本地YUM源

    一.将DVD光盘放入RedHat/CentOS6.X服务器/电脑光驱中 二.挂载DVD光驱到/mnt/cdrom # mkdir -p /mnt/cdrom # mount -t iso9660 /d ...

  10. AUC(Area Under roc Curve )计算及其与ROC的关系

    转载: http://blog.csdn.net/chjjunking/article/details/5933105 让我们从头说起,首先AUC是一种用来度量分类模型好坏的一个标准.这样的标准其实有 ...