jsp页面显示扇形图、柱状图，折线图等功能的实现

最近在做问卷调查，在结果统计显示的时候要用到统计图，经过一番努力终于弄出来了，在这里和大家分享一下：

首先是要下载jqChart的案例，在自己的项目中引入三个文件一个css，两个js，然后在自己要显示统计图的页面上引入所选中的图的js文件即可

<link rel="stylesheet" type="text/css" href="css/pieChart/jquery.jqChart.css" />必备

<script src="js/pieChart/jquery.jqChart.min.js" type="text/javascript"></script>必备

<script lang="javascript" type="text/javascript" src="js/pieChart/excanvas.js"></script>//为了在IE上能够显示

然后是js代码：

注意：data是你可以把你的数据拼成一个二维数组放入（我是这样做的，因为显示的数据每次都不一样），如果你的表显示的数据一直不变，那么你可以直接在代码中的data：data换成data：[['United States', 65], ['United Kingdom', 58], ['Germany', 30],  ['India', 60], ['Russia', 65], ['China', 75]]

http://download.csdn.net/detail/zhangqun23/9611326  大家可以在这里下载jqChart的样包，基本需要的东西都有  附上柱状图的图片，扇形图就不附了

//扇形图

function drawPie(data) {
var background = {
type : 'linearGradient',
x0 : 0,
y0 : 0,
x1 : 0,
y1 : 1,
colorStops : [ {
offset : 0,
color : 'white'
}, {
offset : 1,
color : 'white'
} ]
};

$("#jqChart").jqChart(
{
title : {
text : '扇形统计图'
},
legend : {
title : '选项'
},
border : {
strokeStyle : '#AAAAAA'
},
background : background,
animation : {
duration : 1
},
shadows : {
enabled : true
},
series : [ {
type : 'pie',
fillStyles : [ '#418CF0', '#FCB441', '#E0400A', '#056492',
'#BFBFBF', '#1A3B69', '#FFE382' ],
labels : {
stringFormat : '%.1f%%',
valueType : 'percentage',
font : '15px sans-serif',
fillStyle : 'white'
},
explodedRadius : 10,
explodedSlices : [ 5 ],
data : data,
labelsPosition : 'outside', // inside, outside
labelsAlign : 'circle', // circle, column
labelsExtend : 20,
leaderLineWidth : 1,
leaderLineStrokeStyle : 'black'
} ]
});


}

//柱状图
function drawColumn(data) {
var background = {
type : 'linearGradient',
x0 : 0,
y0 : 0,
x1 : 0,
y1 : 1,
colorStops : [ {
offset : 0,
color : 'white'
}, {
offset : 1,
color : 'white'
} ]
};
$("#jqChart").jqChart(
{
title : {
text : '柱状统计图'
},
animation : {
duration : 1
},
border : {
strokeStyle : '#AAAAAA'
},
shadows : {
enabled : true
},
series : [ {
type : 'column',
title : '选项',
fillStyles : [ '#418CF0', '#FCB441', '#E0400A', '#056492',
'#BFBFBF', '#1A3B69', '#FFE382' ],
data : data
} ]
});
}