登录注册

jquery.jqplot 绘图插件

插件特效
2026-07-26 03:23 3 次浏览 • 0 次下载 3.5KB
jquery.jqplot 绘图插件

例如js代码：

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
$(document).ready(function(){
var line1 = [6.5, 9.2, 14, 19.65, 26.4, 35, 51];
var plot1 = $.jqplot('chart1', [line1], {
legend: {show:false},
axes:{
xaxis:{
tickOptions:{
angle: -30
},
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
label:'Core Motor Amperage',
labelOptions:{
fontFamily:'Helvetica',
fontSize: '14pt'
},
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis:{
renderer:$.jqplot.LogAxisRenderer,
tickOptions:{
labelPosition: 'middle',
angle:-30
},
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions:{
fontFamily:'Helvetica',
fontSize: '14pt'
},
label:'Core Motor Voltage'
}
}
});
});


并引用在html引用：

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.logAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="../jquery.jqplot.min.css" />
评论