当前位置: 代码迷 >> JavaScript >> amcharts js版本调整Struts2实例(柱形、饼图、线形)
  详细解决方案

amcharts js版本调整Struts2实例(柱形、饼图、线形)

热度:715   发布时间:2013-01-28 11:49:56.0
amcharts js版本整合Struts2实例(柱形、饼图、线形)

1、单个学生成绩分析Action:

/**
 * @功能:单个学生成绩分析
 * @作者: smile
 * @时间:2013-1-15 下午2:23:21
 * @版本:1.0
 */
public class StudentScoreAnalyseAction extends AbstractAction {

	// 成绩单分数id
	private int eduScoreListId;
	// 成绩单id
	private int eduExamInfoId;
	// 成绩单科目
	private String subjectName;
	// 学生id
	private String userid;
	// 学生姓名
	private String userName;
	// 成绩单科目集合
	private List<EduExam> EduExamList;
	// 最高分
	private String maxScore;
	// 最低分
	private String minScore;
	// 平均分
	private String averageScore;
	// 子女得分
	private String score;
	// 此次考试参加学生数
	private int studentNum;
	// 1:总分分析 2:单个科目分析
	private int flag;
	// 班级id
	private String classId;

	protected String go() throws Exception {
		ScoreManageSrevice scoreManageService = (ScoreManageSrevice) this.getBean("scoreManageSrevice");
		EduExamList = scoreManageService.getSubjectByExamInfoId(eduExamInfoId);
		userName = java.net.URLDecoder.decode(userName, "UTF-8");
		classId = scoreManageService.getClassIdByEduExamInfoId(eduExamInfoId);
		
		if (flag == 1 || flag == 3) {// 总数分析
			// 统计最高分
			maxScore = scoreManageService.getMaxScore(eduExamInfoId);
			// 统计最低分
			minScore = scoreManageService.getMinScore(eduExamInfoId);
			// 统计子女得分
			score = scoreManageService.getStudentScore(eduExamInfoId, userid);
			// 统计平均得分
			averageScore = scoreManageService.getAverageScore(eduExamInfoId);
			// 统计人数
			studentNum = scoreManageService.getStudentNum(eduExamInfoId);

			if (flag == 3) {
				return "success";
			}
			return "input";
		} else if (flag == 2) {// 单个科目分析
			if (subjectName != null && !"".equals(subjectName)) {
				subjectName = java.net.URLDecoder.decode(subjectName, "UTF-8");
				// 统计该科目最高分
				maxScore = scoreManageService.getSubjectMaxScore(eduExamInfoId, subjectName);
				// 统计该科目最低分
				minScore = scoreManageService.getSubjectMinScore(eduExamInfoId, subjectName);
				// 统计该用户userId 该科目subjectName的得分
				score = scoreManageService.getSubjectStudentScore(eduExamInfoId, subjectName, userid);
				// 统计该科目平均分
				averageScore = scoreManageService.getSubjectAverageScore(eduExamInfoId, subjectName);
				// 统计参加考试人数
				studentNum = scoreManageService.getStudentNum(eduExamInfoId);

				return "success";
			}
		}
		return null;
	}

	省略get... set....
}

?2、xml配置:

<!-- 单个学生成绩分析 -->
		<action name="studentScoreAnalyse" class="jxq.xxt.scoremanage.action.StudentScoreAnalyseAction">
			<result name="input" type="freemarker">/scoremanage/studentScoreAnalyse_index.ftl</result>
			<result name="success" type="json"></result>
		</action>

?3、页面:

$(document).ready(function(){
	
	<!--当第一次进来页面  显示总分-->
	if(${flag}==1){
		var chart;  
		var chartData = [	
							{
								category:'最高分',
							 	score:'${maxScore}',
							 	color: "#FF0F00"
							},
							{
								category:'最低分',
								score:'${minScore}',
								color: "#88003B"
							},
							{
								category:'平均分',
								score:'${averageScore}',
								color : "#FF4D34"
							},
							{
								category:'${userName}分数',
								score:'${score}',
								color : "#0081AC"
							}
						];
						
		AmCharts.ready(function(){
				
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "category";
                <!--the following two lines makes chart 3D--> 
                chart.depth3D = 20;
                chart.angle = 30;
                <!--字体大小-->
				chart.fontSize = 13;
				chart.startDuration = 1;
				chart.columnWidth = 0.4;
				
                <!--category-->
                var categoryAxis = chart.categoryAxis;
                <!--横轴文字角度 0为水平显示  90为竖直显示  默认90-->
                categoryAxis.labelRotation = 0;
                categoryAxis.dashLength = 5;
                categoryAxis.gridPosition = "start";
                <!--横轴字体大小-->
                categoryAxis.fontSize = 13;
                <!--横轴上下偏移量-->
                categoryAxis.offset = 0;
                <!--横轴字刻线长度 无太大作用-->
                categoryAxis.tickLength = 8;
                <!--竖性网格线-->
                categoryAxis.gridAlpha = 0;
                

                <!--value-->
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.dashLength = 5;
                <!--竖轴的厚度  没太大用处-->
                valueAxis.axisThickness = 1;
                valueAxis.gridAlpha = 0;
                chart.addValueAxis(valueAxis);

                <!--GRAPH-->            
                var graph = new AmCharts.AmGraph();
                graph.valueField = "score";
                graph.colorField = "color";
                graph.balloonText = "[[category]]: [[score]]";
                graph.type = "column";
                graph.lineAlpha = 0;
                graph.fillAlphas = 1;
                
                graph.lineThickness = 1;
                chart.addGraph(graph);

                <!--WRITE--> 
                chart.write("chartdiv");
		});	
	}
});
</script>


<div id="chartdiv" style="width: 100%; height: 500px;"></div>

?4:、柱形图:


?5、学生分数趋势分析:

/**
 *@功能:单个学生多次成绩趋势分析
 *@作者: smile
 *@时间:2013-1-16 下午5:42:20
 *@版本:1.0
 */
public class StudentScoreMemoryAnalyseAction extends AbstractAction {

	private static final long serialVersionUID = 1L;

	// 学生id
	private String userid;
	// 学生姓名
	private String userName;
	// 学生姓名
	private String name;
	// 存放学生总分 数组
	private List<TrendAnalyseBean> score;

	protected String go() throws Exception {
		
		ScoreManageSrevice scoreManageService = (ScoreManageSrevice) this.getBean("scoreManageSrevice");
		name = java.net.URLDecoder.decode(userName, "UTF-8");
		score = scoreManageService.getStudentScore(userid);
		return "success";
	}
	
	public String input(){
		return "input";
	}

}

?6、页面:

$(document).ready(function(){
			
			$.getJSON(
			"../scoremanage/studentScoreTrendAnalyse.action",
			{"userid":${userid},"userName":'${userName}',"number":Math.random()},
			function(json){
				
				var chart;
				var chartData = [];
				for(var i = 0;i<json.score.length;i++){
					var data = {
									"title":json.score[i].examTitle,
									"score":json.score[i].score,
									"average":json.score[i].averageScore
							   };
					chartData.push(data);
				}
				
				chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "title";
				chart.startDuration = 0.5;
				chart.fontSize = 13;
				chart.fontFamily = "微软雅黑";
                chart.balloon.color = "#000000";
               
                var categoryAxis = chart.categoryAxis;
                categoryAxis.dashLength = 1;
                categoryAxis.gridAlpha = 0.15;
				categoryAxis.labelRotation = 40;
                categoryAxis.axisColor = "#DADADA";

                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.axisColor = "#DADADA";
                valueAxis.dashLength = 1;
                valueAxis.logarithmic = false; 
                chart.addValueAxis(valueAxis);

                var graph = new AmCharts.AmGraph();
				graph.title = json.name+"考试成绩";
                graph.valueField = "score";
                graph.type = "smoothedLine";
                graph.bullet = "bubble";
                graph.bulletColor = "#FFFFFF";
                graph.bulletBorderColor = "#00BBCC";
                graph.bulletBorderThickness = 1;
                graph.bulletSize = 8;
				graph.balloonText = json.name+"总分为:[[score]]";
                graph.lineThickness = 2;
                graph.lineColor = "#00BBCC";
                chart.addGraph(graph);

                var graph = new AmCharts.AmGraph();
				graph.title = "班级平均分成绩";
                graph.type = "smoothedLine";
                graph.bullet = "bubble";
                graph.bulletColor = "#FFFFFF";
                graph.bulletBorderColor = "#00BBCC";
                graph.bulletBorderThickness = 1;
                graph.bulletSize = 8;
				graph.balloonText = "班级平均分为:[[average]]";
                graph.valueField = "average";
                graph.lineThickness = 2;
                graph.lineColor = "#F45B00";
                chart.addGraph(graph);

                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorPosition = "middle";
				chartCursor.cursorColor = "#D40600";
				chartCursor.bulletSize = 8;
                chart.addChartCursor(chartCursor);

				var legend = new AmCharts.AmLegend();
                legend.markerType = "circle";
                chart.addLegend(legend);

                chart.write("chartdiv");
			}
		);
});

<div id="chartdiv"  style="width: 100%; height: 500px"></div>

?7、线形图:

8、班级成绩分析:

/**
 * @功能:班级成绩分析
 * @作者: smile
 * @时间:2013-1-17 下午2:44:01
 * @版本:1.0
 */
public class ClassScoreAnalyseAction extends AbstractAction {

	private static final long serialVersionUID = 1L;

	// 成绩单id
	private String examId;
	// 成绩单科目集合
	private List<EduExam> EduExamList;
	// 科目名
	private String subjectName;
	// 优秀人数
	private int excellentCount;
	// 良好人数
	private int goodCount;
	// 及格人数
	private int passCount;
	// 不及格人数
	private int unpassCount;
	// 科目总数
	private String maxScore;

	protected String go() throws Exception {
		ScoreManageSrevice scoreManageService = (ScoreManageSrevice) this.getBean("scoreManageSrevice");
		EduExamList = scoreManageService.getSubjectByExamInfoId(Integer.valueOf(examId));

		return "success";
	}

	public String input() throws Exception {

		ScoreManageSrevice scoreManageService = (ScoreManageSrevice) this.getBean("scoreManageSrevice");
		subjectName = java.net.URLDecoder.decode(subjectName, "UTF-8");

		if (subjectName.equals("-1")) {// 总成绩分析
			// 统计总成绩的优秀人数
			excellentCount = scoreManageService.getSumCount(subjectName, examId, maxScore, 0.8, 1);
			// 统计总成绩的良好人数
			goodCount = scoreManageService.getSumCount(subjectName, examId, maxScore, 0.7, 0.8);
			// 统计总成绩的及格人数
			passCount = scoreManageService.getSumCount(subjectName, examId, maxScore, 0.6, 0.7);
			// 统计总成绩的不及格人数
			unpassCount = scoreManageService.getSumCount(subjectName, examId, maxScore, 0, 0.6);
		} else {
			// 统计该科目的优秀人数
			excellentCount = scoreManageService.getCount(subjectName, examId, maxScore, 0.8, 1);
			// 统计该科目的良好人数
			goodCount = scoreManageService.getCount(subjectName, examId, maxScore, 0.7, 0.8);
			// 统计该科目的及格人数
			passCount = scoreManageService.getCount(subjectName, examId, maxScore, 0.6, 0.7);
			// 统计该科目的不及格人数
			unpassCount = scoreManageService.getCount(subjectName, examId, maxScore, 0, 0.6);
		}
		return "input";
	}

}

?9、页面:

//班级成绩分析科目分析
function classScoreInfoAnalyse(){
	
	//取出隐藏域中的成绩单Id  
	var examId = $("#examId").val();
	//判断输入框总分是否为正整数
	var regx = /^([1-9]\d*)$/;
	if(!regx.test($("#scoreSum").val())){
		alert("输入的总分不是正整数!");
		return false;
	}
	//总分
	var maxScore = $("#scoreSum").val();
	//当前选中需要分析的科目名
	var subjectName = $("#myCjfx_tit .current a").attr("value");
	subjectName = encodeURI(subjectName);
	
	$.getJSON(
			"../scoremanage/classScoreAnalyse!input.action",
			{"examId":examId,"subjectName":subjectName,"maxScore":maxScore,"number":Math.random()},
			function(json){
				var chart;
				var chartData = [
					     			{
					                     category: "优秀",
					                     count: json.excellentCount,
					     				 color:"#FF4D1C"
					                 }, {
					                	 category: "良好",
					                	 count: json.goodCount,
					     				 color:"#20B3FF"
					                 }, {
					                	 category: "及格",
					                	 count: json.passCount,
					     				 color:"#007EA8"
					                 }, {
					                	 category: "不及格",
					                	 count: json.unpassCount,
					     				 color:"#88003B"
					                 }
				                 ];
				
				$("#chartdiv").html("");
					
				// 创建饼图
                chart = new AmCharts.AmPieChart();
                // 饼图标题  文字大小
                // chart.addTitle(json.subjectName+"成绩分析", 13);
				// 数据提供方
                chart.dataProvider = chartData;
				// 切片属性
                chart.titleField = "category";
				// 切片值
                chart.valueField = "count";
				// 切片颜色
				chart.colorField = "color";
				// 动画
                chart.sequencedAnimation = true;
				// 动画效果  ">", "<", "elastic" and "bounce".
                chart.startEffect = "elastic";
				// 内半径
                chart.innerRadius = "30%";
				// 动画持续时间
                chart.startDuration = 1;
				// 文字与饼图之间的距离
                chart.labelRadius = 45;
				// 饼图深度
                chart.depth3D = 16;
				// 饼图倾斜角度
                chart.angle = 35;
				// 字体大小
				chart.fontSize = 13;
				// 字体类型
				chart.fontFamily = "微软雅黑";
			
				// 显示各个分类
				legend = new AmCharts.AmLegend();
				// 对齐方式 有三种:"left", "center", "right"
                legend.align = "center";
				// 分类标记图 这里设置成方块形状 
                legend.markerType = "square";
                chart.addLegend(legend);

                // WRITE                                 
                chart.write("chartdiv");
			}
		);
	
	return true;
}

<div id="chartdiv" style="width: 100%; height: 500px;"></div>

?10、饼图:

?

?

?

?

?

  相关解决方案