jqPlot是一款基于jQuery的图表插件，适用于HTML5 Canvas支持的浏览器。本文提供jqPlot的中文API使用说明，包括引入脚本、创建容器、配置选项，并给出在线示例和源码下载链接。
还记得以前给大家介绍过的几款jquery图表插件么？忘了？那好，一起来回顾下
jQuery柱状图插件TufteGraph
Google Chart 图表使用详解
jQuery线状图插件Sparkline
jQuery图表插件Flot用法 及 jQuery图表插件Flot中文文档
那么今天我再来向大家介绍一款jquery图表插件jqplot，下面是一些中文说明，希望对你有所帮助。
简介
jqplot是一款非常不错的基于jquery的图表插件，这篇文章主要帮助大家整理了jqplot的中文使用说明和在线示例及源码下载。jqplot插件在支持HTML5的浏览器上将会在canvas上呈现图表。
引入脚本文件
jqplot需要1.4.3以上的jquery版本支持，刚才说过了，jqplot在支持HTML5 Canvas的浏览器上将以canvas呈现，否则，如果你在IE9以下版本的浏览器上则要引入excanvas.js文件，当然，jqplot的CSS文件也要同时引入，代码如下：
|
1
2
3
4
|
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<
script
language
=
"javascript"
type
=
"text/javascript"
src
=
"jquery.min.js"
></
script
>
<
script
language
=
"javascript"
type
=
"text/javascript"
src
=
"jquery.jqplot.min.js"
></
script
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"jquery.jqplot.css"
/>
|
添加一个plot容器
我们可以在页面上为jqplot添加一个容器，比如div，但要注意的是，要为这个div容器指定宽度好高度，如下代码：
|
1
|
<
div
id
=
"chartdiv"
style
=
"height:400px;width:300px; "
></
div
>
|
接下来我们在上面创建好的容器中通过调用$.jqplot实现图表的生成和渲染，比如如果用下面的数据来初始化jqplot图表：
|
1
|
$.jqplot(
'chartdiv'
, [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
|
jqplot属性选项
我们在调用$.jqplot时可以传入一些参数options来自定义jqplot，部分参数options如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
最低0.47元/天 解锁文章
扫一扫
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
