图标插件--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="width: 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. #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。与线形图、柱状图不同的是，饼状图的数据格式是一个三维数组。

[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. #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，下面是完整的环形图示例代码：

[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. #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。来看完整的仪表盘图表代码：

[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. #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>

效果图：

时间： 2024-10-10 10:49:09

图标插件--jqplot实现柱状图及饼图，表盘图示例的相关文章

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

柱状图 在jqPlot图表插件使用说明(一)中,我们已经能够通过jqPlot绘制出比較简单的线形图.通过查看源码.我们也能够看出,线形图是jqPlot默认的图表类型: [javascript] view plaincopy /** * Class: Series * An individual data series object.  Cannot be instantiated directly, but created * by the Plot oject.  Series propert

【插件】ECharts---超级强大的图表插件使用（柱状图和饼状图及部分设置）

序言 最近一直在赶项目,遇到过很多问题,也找到了一些解决的方法,现在准备静下心来整理一下这段时间的成果,完善代码,把遇到的问题和解决方法记下来,备忘. 前几天做统计页面的时候,需求为对在线/离线人员统计,对不同类别统计,需要显示统计信息并能单击某一类别触发事件. 用到的插件当然是强大的echarts了.这里为官方文档案例,最全面的还是官方文档啦. html <!-- 统计表 --> <div class="chart" id="leaderchart&quo

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

jQuery插件jqplot的详细配置说明和渲染器 (2012-08-23 08:57:42) 转载▼ 标签: jqplot 详细配置 渲染器 it 分类: 技术类 jQuery.jqplot插件的官方网址:http://www.jqplot.com/ jQuery.jqplot('target', data, options);//target:要显示的位置.data:显示的数据.options:其它配置 options: seriesColors: ["#4bb2c5", &quo

Web前端图表绘制JQuery插件jqplot

在此之前使用了Chart.js.Highcharts,首先了解一下这两款插件的优势与不足,然后再来了解jqplot. 1.Chart Chart中文官网:http://chartjs.cn/ 1.1优势: 1.1.1Chart是一个基于HTML5表情按canvas来开发的纯javascript库,Chart.js(44KB)Chart.min.js(20KB),只需要引用一个文件即可搞定,用起来非常干净舒服. 1.1.2Chart可以支持六种图标类型:折线图(Line).柱形图(Bar).饼形图

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

今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. Highcharts地址:https://www.hcharts.cn/demo/highcharts,接下来我就直接上代码了. 首先是后台代码: using System; using System.Collections.Generic; using System.Linq; using System.Web

jquery easyui+sparkline插件+jqplot插件实现数据表行内插入线形图

Jquery easyui : 实现前端数据包格式化输出,支持多种模块式定义,只需要添加相应的预设参数即可实现丰富的前端. 资料参考: http://www.jeasyui.com/ Jquery sparkline: 基于jQuery 的js插件,底层调用html5的canvas标签,并通过js动态实现在数据表行内画条形图或趋势图,操作简单,可实现不同类型的图形化,如线形图,饼状图,柱形图. 资料参考:http://omnipotent.net/jquery.sparkline/#s-docs

Android----画柱状图和饼图

使用GraphicalView画柱状图和饼图 一.achartengine库的下载,下载地址: http://code.google.com/p/achartengine/downloads/list 下载完成后,把jar文件粘贴到libs文件夹 achartengine是为Android设计的绘图工具库. 二.在android项目中如何使用 先定义一个GraphicalView GraphicalView graphicalView; 然后,从chartfactory获取 graphicalV

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

简单交互 在之前的学习中,我们已经能够绘制各种类型的图表,也能够给图表加入不同的组件,如标题.图例等等.但这些图表仅仅能用于展示数据,一旦希望对图表有所操作--比方查看数据明细--就显得束手无策了.事实上jqPlot是提供了图表事件交互功能的,且实现起来,也相当的简单.接下来我们要做的就是,学习假设监听图表事件,并对事件进行处理. 在jqPlot的源代码中,我们可以看到这种代码片段: [javascript] view plaincopy ** * Class: jqPlot * Plot ob

dotnetcharting 生成柱状图，饼图等统计图

DotNetCharting是一个非常棒的.NET图表控件,对中文支持非常好,而且操作方便,开发快速,既有for webform 也有for winform的,而且.net1.1和2.0都有支持.官方地址是http://www.dotnetcharting.com/ 简单使用方法: 1.首先要搞定帮助文档:从官方网站下载解压后把dotnetcharting4.2for1.x目录设置成虚拟目录,.net1.1的环境,然后就可以看帮助示例了.2.把\bin\dotnetCHARTING.dll添加到