<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib uri="/WEB-INF/taglib/c.tld" prefix="c"%>
<%@ include file="../../common/init.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="../../common/top.jsp"%>
<script src="${ctx}/static/highcharts/js/highcharts.js"></script>
</head>
<body class="easyui-layout">
	<%@ include file="../../common/topicheader.jsp"%>
	<%@ include file="../../common/topicmenu-w.jsp"%>
	<div data-options="region:'center',title:'首页 - 阅卷进度'">
		<div id="chart"  style="width: 500px; float: left; margin: 0 80px; margin-top: 10px;">
		</div>
		<div class="fr mr1">
			<div id="table" style="width: 300px">
				<table class="table table-bordered table-hover mr-t">
					<thead>
						<tr>
							<th style="text-align: center;">题块</th>
							<th style="text-align: center;">进度</th>
						</tr>
					</thead>
					<tbody id="tbody">
					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		showProgress();
	});
	
	function showProgress() {
		var labs = [];
		var d = [];
		$.post('${ctx}/topicmarker/progress/progress-list',function(res) {
			$('#tbody').find('tr').remove();
			$.each(res, function(n, obj) {
				labs.push(obj.name);
				var o = {};
				o.y = parseFloat(obj.ratio);
				d.push(o);
				$('#tbody').append(
						'<tr><td style="text-align:center;">' + obj.name
								+ '</td><td style="text-align:center;">'
								+ obj.ratio+ '%</td></tr>');
			});
			var chart;
			chart = new Highcharts.Chart({  
		        chart: {  
		            renderTo: 'chart',  
		            type: 'column', 
		            backgroundColor:'#F5F5F5',
		            events: {  
		              load: function() {      
		                  var series = this.series[0];  
		                  series.setData(d);  
		              }  
		          }  
		        },  
		        title: {  
		            text: '<b>题块完成比例</b>',
		            style: {  
	                     color:'#263C53'  
	                    } 
		        },  
		        subtitle: {  
		            text: '各题块完成比例及总体完成比例',
		            style: {  
	                     color:'#FFFFFF'  
	                    } 
		        },
		        xAxis: {  
		            categories: labs ,
		            style: {
	                     color:'#263C53'
	                     }
		        },  
		        credits: {
	            	 text: 'qmth.com.cn',
	            	 href: 'http://www.qmth.com.cn'
	        	 },
		        yAxis: {  
		            min: 0,  
		            title: {  
		                text: '比例',
			            style: {
			            	color:'#777777' 
		                     }  
		            },  
		            stackLabels: {  
		                enabled: true,  
		                style: {  
		                    fontWeight: 'bold',  
		                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'white'  
		                }  
		            }  
		        },  
		        legend: {  
		            align: 'right',  
		            x: -100,  
		            verticalAlign: 'bottom',  
		            y: 20,  
		            floating: true,  
		            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',  
		            borderColor: '#CCC',  
		            borderWidth: 1,  
		            shadow: false  
		        },  
		        tooltip: {  
		            formatter: function() {  
		                return '<b>'+ this.y +'%</b><br/>';  
		            }  
		        },  
		        plotOptions: {  
		            column: {  
		                stacking: 'normal',  
		                dataLabels: {  
		                    enabled: true,  
		                    color: 'white'  
		                }  
		            },
		            series: {  
		                colorByPoint: true
		            } 
		        },  
		        series: [{  
		            name: '题块',  
		            data: [5, 3, 4] ,
		            color: 'white'
		        }]  
		    });
		});
	}
</script>
</html>
