图表插件--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="width: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. var plot = $.jqplot(‘chart1‘, data, {
  17. title:{         // 标题属性
  18. text:‘<div class="chart-title">2014年5月广告位投放数量趋势图<div>‘,         // 标题文本
  19. show:true,              // 是否阴影
  20. fontFamily:‘微软雅黑‘,  // 标题字体
  21. fontSize:14,            // 标题字体大小
  22. textAlign:‘left‘,       // 标题对齐方式
  23. textColor:‘#515151‘,    // 标题颜色（也可以写作属性color）
  24. escapeHtml:false        // 是否转义HTML字符，值为false时，可以在text属性中使用HTML代码
  25. },
  26. axesDefaults:{  // 默认坐标轴属性
  27. min:0,
  28. tickOptions:{
  29. showMark:false
  30. }
  31. },
  32. axes:{          // 具体坐标轴属性
  33. xaxis:{
  34. label:‘日期‘,
  35. ticks:[[1,‘05/01‘], [5,‘05/05‘], [10,‘05/10‘], [15,‘05/15‘], [20,‘05/20‘], [25,‘05/25‘], [30,‘05/30‘]]
  36. },
  37. yaxis: {
  38. label: ‘投放数量‘
  39. }
  40. },
  41. legend:{        // 图例属性
  42. show:true
  43. },
  44. grid:{          // 背景网格属性
  45. borderWidth:1,
  46. shadow:false
  47. },
  48. seriesDefaults:{// 默认数据序列属性
  49. lineWidth:1,
  50. markerOptions:{
  51. show:true
  52. }
  53. },
  54. series:[        // 具体数据序列属性
  55. {
  56. color:‘#FF6666‘,
  57. label:‘CPC‘
  58. },{
  59. color:‘#0066CC‘,
  60. label:‘CPT‘
  61. },{
  62. color:‘#99CC66‘,
  63. label:‘CPM‘
  64. }
  65. ],
  66. highlighter:{
  67. show:true,
  68. tooltipAxes:‘y‘,
  69. useAxesFormatters:false,
  70. tooltipFormatString:‘投放量：%d‘
  71. }
  72. });
  73. });

因为在配置图表的标题（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. #chart1{
  11. border: 1px solid #dddddd;
  12. }

其它部分代码没有改动，此时在页面中查看图表展示效果，如下：

完整代码

目录结构：

完整代码：

[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. #chart1{
  18. border: 1px solid #dddddd;
  19. }
  20. </style>
  21. <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script><![endif]-->
  22. <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
  23. <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script>
  24. <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script>
  25. <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script>
  26. <script src="js/jqPlot/1.0.4/plugins/jqplot.cursor.min.js" type="text/javascript" charset="utf-8"></script>
  27. <script src="js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js" type="text/javascript" charset="utf-8"></script>
  28. <script type="text/javascript" charset="utf-8">
  29. $(function(){
  30. /**
  31. * 第一个参数为body中div的id值
  32. * 第二个参数为要绘制的线形图中各拐点的取值
  33. * */
  34. var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4,
  35. 12, 6, 47, 15, 24, 39, 16, 48, 5, 6,
  36. 6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3],
  37. [45, 24, 24, 29, 3, 19, 32, 45, 41, 8,
  38. 34, 17, 1, 45, 37, 47, 34, 30, 31, 10,
  39. 29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49],
  40. [43, 23, 37, 12, 26, 11, 29, 29, 22, 27,
  41. 25, 5, 18, 34, 20, 3, 8, 16, 41, 19,
  42. 9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13]
  43. ]
  44. var plot = $.jqplot(‘chart1‘, data, {
  45. title:{         // 标题属性
  46. text:‘<div class="chart-title">2014年5月广告位投放数量趋势图<div>‘,           // 标题文本
  47. show:true,              // 是否阴影
  48. fontFamily:‘微软雅黑‘,  // 标题字体
  49. fontSize:14,            // 标题字体大小
  50. textAlign:‘left‘,       // 标题对齐方式
  51. textColor:‘#515151‘,    // 标题颜色（也可以写作属性color）
  52. escapeHtml:false        // 是否转义HTML字符，值为false时，可以在text属性中使用HTML代码
  53. },
  54. axesDefaults:{  // 默认坐标轴属性
  55. min:0,
  56. tickOptions:{
  57. showMark:false
  58. }
  59. },
  60. axes:{          // 具体坐标轴属性
  61. xaxis:{
  62. label:‘日期‘,
  63. ticks:[[1,‘05/01‘], [5,‘05/05‘], [10,‘05/10‘], [15,‘05/15‘], [20,‘05/20‘], [25,‘05/25‘], [30,‘05/30‘]]
  64. },
  65. yaxis: {
  66. label: ‘投放数量‘
  67. }
  68. },
  69. legend:{        // 图例属性
  70. show:true
  71. },
  72. grid:{          // 背景网格属性
  73. borderWidth:1,
  74. shadow:false
  75. },
  76. seriesDefaults:{// 默认数据序列属性
  77. lineWidth:1,
  78. markerOptions:{
  79. show:true
  80. }
  81. },
  82. series:[        // 具体数据序列属性
  83. {
  84. color:‘#FF6666‘,
  85. label:‘CPC‘
  86. },{
  87. color:‘#0066CC‘,
  88. label:‘CPT‘
  89. },{
  90. color:‘#99CC66‘,
  91. label:‘CPM‘
  92. }
  93. ],
  94. highlighter:{
  95. show:true,
  96. tooltipAxes:‘y‘,
  97. useAxesFormatters:false,
  98. tooltipFormatString:‘投放量：%d‘
  99. }
  100. });
  101. });
  102. </script>
  103. </head>
  104. <body>
  105. <!-- 用于绘制图表，id在JS代码中会用到 -->
  106. <div id="chart1" style="width:800px;height:400px;"></div>
  107. </body>
  108. </html>

时间： 2024-07-29 15:02:37

图表插件--jqplot简单示例及参数说明的相关文章

图表插件--jqplot交互示例

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

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

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

Highcharts图表插件的简单使用说明

Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表. Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.  Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表.目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型.  H

JS图表插件 highcharts 简单Demo

highcharts  demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>highcharts Demo</title> </head> <body> <div id="container"></div> <script s

jqPlot图表插件使用说明（二）

柱状图 在jqPlot图表插件使用说明(一)中,我们已经可以通过jqPlot绘制出比较简单的线形图.通过查看源代码,我们也可以看出,线形图是jqPlot默认的图表类型: /** * Class: Series * An individual data series object. Cannot be instantiated directly, but created * by the Plot oject. Series properties can be set or overriden b

图标插件--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 proper

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).饼形图

推荐10款免费而优秀的图表插件

开发人员很多时候需要使用图表来表现一些数据,而一张图表往往能够比几行密密麻麻的数字表格更能直观地展示数据内容.随着Web技术的发展,从传统只能依靠于flash.IE的vml,各个浏览器尚不统一的svg,到如今规范统一的canvas.svg为代表的html5技术,表现点.线.面要素的技术已经越来越规范成熟.我在本篇文章中收集了10款免费开源且比较优秀的图表制作插件,以供各位参考. 1,ichartjs(国产) ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业于南昌大学

图标插件--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