jquery柱状图实例
jqplot默认制作曲线图，如果想做柱状图，必须引入plugin包中的插件js：
一、几个简单柱状图实例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- jquery -->
<script type="text/javascript" src="../js/jquery-1.3.js"></script>
<!-- core -->
<script type="text/javascript" src="../jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" href="../jqplot/jquery.jqplot.css" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../jqplot/excanvas.js"></script><![endif]-->
<!-- plugin -->
<script type="text/javascript" src="../jqplot/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="../jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
line1 = [4, 2, 9, 16]; 改中吵//子统计1数据
line2 = [3, 7, 6.25, 3.125]; //子统计2数据
//--最简
plot = $.jqplot('chart', [line1], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //使用柱状图表示
rendererOptions: {
barMargin: 35 //柱状体组之间间隔
}
}
});
//--双柱状图
plot1 = $.jqplot('chart1', [line1,line2], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //使用柱状图表示
rendererOptions: {
barMargin: 35 //柱状体组之间间隔
}
}
});
//--添加横坐标分类
plot2 = $.jqplot('chart2', [line1,line2], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //使用柱状图表示
rendererOptions: {
barMargin: 10 //柱状体组之间间隔
}
},
axes: {
xaxis: {
ticks:['区域1', '区域2', '区域3', '区域4'],
renderer: $.jqplot.CategoryAxisRenderer //x轴绘制方式
}
}
});
});
</script>
</head>
<body>
<span id="chart" style="培蚂margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
<span id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
<span id="chart2" style="margin-top:20px; margin-left:20px; 核侍width:400px; height:240px;"></span>
</body>
</html>
效果：
已赞过
已踩过<
