<p>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
</p>
<p>人员表+饼状图打印（1.不能用table布局，2.浏览器不同会导致显示页面不同）</p>
<style><!--@page {size: auto; margin: 0mm; }
a {
text-decoration: none;
color: #333;
}
.show {
width: 50%;
margin-left: 25%;
border: 1px solid #696;
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 0px 10px;
-moz-box-shadow: #666 0px 0px 10px;
box-shadow: #666 0px 0px 10px;
}
.daochushow, .daohanghide {
list-style-type: none;
height: auto;
width: 90%;
margin-left: 2%;
text-align: center;
}
li {
min-height: 30px;
line-height: 30px;
height: auto;
}
.daochushow .daochu1 {
height: 45px;
width: 100%;
font-size: 30px;
font-weight: 700;
margin-top:30px;
}
.daochushow .daochu1 img {
width: 100%;
height: 100%;
}
.daohanghide .daochu2 {
font-size: 18px;
text-align: left;
}
.daochushow .daochu2 {
font-size: 20px;
text-align: left;
}
.daochushow .daochu3 {
width: 100%;
height: auto;
}
.daochushow .daochu3 div {
float: left;
border-bottom: 1px solid #808080;
font-size: 16px;
}
.divtitle {
font-size: 18px;
font-weight: 700;
margin-top: 20px;
}
.daochushow .daochu4 {
width: 100%;
height: auto;
margin-top:50px;
margin-bottom:50px;
}
.daochushow .daochu4 #Div3 {
width: 100%;
height: 400px;
}
.daochushow .bottom {
font-size: 20px;
text-align: right;
margin-top: 5px;
}
.heightzuoxiajiao {
height: 300px;
}
.fenye {
page-break-after:always
}
.titleimg {
display:none;
}
@media print {
.daochushow, .daohanghide {
list-style-type: none;
height: auto;
width: 90%;
margin-left: 2%;
text-align: center;
}
li {
min-height: 30px;
line-height: 30px;
height: auto;
}
.daochushow .daochu1 {
height: 45px;
width: 100%;
font-size: 30px;
font-weight: 700;
margin-top:30px;
}
.daochushow .daochu1 img {
width: 100%;
height: 100%;
}
.daohanghide .daochu2 {
font-size: 18px;
text-align: left;
}
.daochushow .daochu2 {
font-size: 20px;
text-align: left;
}
.daochushow .daochu3 {
width: 100%;
height: auto;
}
.daochushow .daochu3 div {
float: left;
border-bottom: 1px solid #808080;
font-size: 16px;
}
.divtitle {
font-size: 18px;
font-weight: 700;
margin-top: 20px;
}
.daochushow .daochu4 {
width: 100%;
height: auto;
margin-top:50px;
margin-bottom:50px;
}
.daochushow .daochu4 #Div3 {
width: 100%;
height: 400px;
}
.daochushow .bottom {
font-size: 20px;
text-align: right;
margin-top: 5px;
}
.heightzuoxiajiao {
height: 300px;
}
.fenye {
page-break-after:always
}
.titleimg {
display:block;
}
}
--></style>
<form id="form1">
<div class="show">
<ul class="daohanghide">
<li class="daochu2">
<a style="margin-left: 50px;" onclick="javascript:history.go(-1);" href="javascript:;"><span style="font-size: 20px;">↩</span> 返回</a>
<a style="margin-left: 50px;" onclick="DaYin();" href="javascript:;"><span style="font-size: 20px;">㊞</span> 导出&打印</a>
</li>
</ul>
<!--startprint-->
<ul class="daochushow">
<li class="daochu1"><img src="image/bg.png" alt="" /></li>
<li class="daochu1">****报告</li>
<li class="daochu2">
<input class="text1" style="border-bottom: 1px solid #000; border-left: none; border-right: none; border-top: none; background-color: transparent; height: 35px; width: 180px;" type="text" /> 单位：</li>
<li class="daochu2"> 你单位于 参加测试，本次测试10题，体检成绩如下：</li>
<li class="daochu3">
<div class="divtitle" style="width: 10%;">序号</div>
<div class="divtitle" style="width: 20%;">编号</div>
<div class="divtitle" style="width: 15%;">姓名</div>
<div class="divtitle" style="width: 25%;">身份证号</div>
<div class="divtitle" style="width: 15%;">分数</div>
<div class="divtitle" style="width: 15%;">评价</div>
</li>
<li class="daochu3">
<div class="num" style="width: 10%;">1</div>
<div style="width: 20%;">201919191</div>
<div style="width: 15%;">张三</div>
<div style="width: 25%;">3735353535554454</div>
<div style="width: 15%;">100分</div>
<div style="width: 15%;">优秀</div>
</li>
<li class="fenye"></li>
<li class="daochu1 titleimg"><img src="image/bg.png" alt="" /></li>
<li class="daochu4"><!--饼状图-->
<div id="Div3"> </div>
<!--/饼状图--></li>
<li class="daochu2"> 说明：本次测试共有人参加， 其中 平均成绩， 成绩，。</li>
<li class="heightzuoxiajiao"></li>
<li class="bottom">指导员：<input class="text1" style="border: none; height: 35px;" type="text" /></li>
<li class="bottom"></li>
</ul>
<!--endprint--></div>
</form>
<p>
<script type="text/javascript">// <![CDATA[
function DaYin() {
bdhtml = window.document.body.innerHTML;
sprnstr = "<!--startprint-->";
eprnstr = "<!--endprint-->";
prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
window.document.body.innerHTML = "<html><head></head><body>" + prnhtml + "</body></html>";
window.print();
$(".daochushow").css("width","50%");
}
var nn = 1;
$(".num").each(function () {
$(this).text(nn);
nn++;
});
/*---------饼状图----------------*/
var browsers = [];
var zongnum = $("#number").val();
var numstr = $("#num").val();
var fenxi = "";
var arr = new Array();
arr = numstr.split('&');
for (var i = 0; i < arr.length; i++) {
var arrs = new Array();
arrs = arr[i].split(',');
browsers.push({ "name": arrs[0], "y": parseFloat(arrs[2]), "nums": parseInt(arrs[1]) });
fenxi += "成绩" + arrs[0] + arrs[1] + "人，占比" + parseFloat(arrs[2]) + "%；";
}
$("#FenXi").text(fenxi);
//饼状图 (比例)
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
};
var title = {
text: '分析 (共' + zongnum + '人)',
style: {
color: '#000',
fontSize: '18px',
fontWeight: '700',
}
};
var tooltip = {
pointFormat: '<b>{point.y:.1f}%</b>'
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name} ({point.nums}人)</b>: {point.y:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
};
var series = [{
type: 'pie',
data: browsers
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.plotOptions = plotOptions;
json.credits = { enabled: false };
json.colors = ['red', 'orange', 'yellow', 'green',
'cyan', 'blue', '', 'purple', '#6AF9C4'];
json.chart = {
style: {
fontFamily: 'Microsoft YaHei'
},
}
$('#Div3').highcharts(json);
/*---------饼状图----------------*/
// ]]></script>
</p>
