图widget--jqplot样品和参数描述的简单演示

最简单的线图

第一步：引入必要的CSS、JS文件

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中准备要绘制图表的节点

1. <!-- 用于绘制图表，id在JS代码中会用到 -->
2. <div id="chart1" style="width:300px;height:300px;"></div>

第三步：编写JS代码，绘制图表

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代码应该例如以下：

1. var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]], {
2. // 配置属性代码
3. });

全部的属性配置都将以键值对的形式出如今{}之间。

图表作为一种常见的数据表现形式，尤其是线形图表，它具有一定的属性对象。包含但不限于下面几种：

• 标题；
• 坐标轴，又分为X轴、Y轴；
• 数据序列；
• 图例；
• 背景；
• 光标。如鼠标经过数据拐点时，提示该点详细数值。

当中以上每一条都能够作为单独的对象。并衍生出很多其它的属性。以标题为例。标题能够包括文本、字体、颜色、对齐方式等属性。

这些对象和属性，都能够作为一个总的配置对象。传递给jqPlot，以便使jqPlot能够更加精准的绘制图表。

从最外层来看。第三个配置属性的參数应该是例如以下结构：

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. }

进而深入到详细属性的配置，以标题为例。结构例如以下：

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图表的了解，我们就能够绘制出更为复杂些的图表。示比例如以下：

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代码：

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. }

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

完整代码

文件夹结构：

完整代码：

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>

版权声明：本文博客原创文章，博客，未经同意，不得转载。