<title>机构推送资源数据分析(有效性)</title>
<script src="../../js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../js/highcharts.js" type="text/javascript"></script>
<script src="../../js/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
//与DIV-container绑定数据
chart: {
renderTo: 'container'
},
//报表的标题
title: {
text: '资源数据分析',
x: -20
},
//副标题
subtitle: {
text: '数据有效性、无效性分析',
x: -20
},
//X轴数据和样式设置
xAxis: {
labels:{
rotation:-35, //倾斜度
align:'right'},
categories: [<%=xValue %>] //数据
},
//Y轴数据,Y轴的坐标值不用设置,HighCharts会根据我们的数据值自动建立比例
yAxis: {
title: { text: '所占比例(%)' }
},
//显示在报表每个节点上的值,如条形图的上方
plotOptions: {
//column定义为条形图上方 line定义为折线图上方
column: {
dataLabels: {
enabled: true,
style: {
fontSize: '12',
color:'red'
},
formatter: function() {
return this.y +'%';
}
}
}
},
//toolTip用于当鼠标放在对应节点上的数据
tooltip: {
formatter: function () {
var s;
if (this.point.name) {
s = '' +
this.point.name + ': ' + this.y;
} else {
s = '' +
this.x + ': ' + this.y + '%';
}
return s;
}
},
//以饼状图显示数据的总的比例时的标题信息
labels: {
items: [{
html: '总的比例',
style: {
left: '0px',
top: '30px',
color: 'black'
}
}]
},
//将右下角的highcharts.com禁用,也可以自定义设置值如credits:{href='#',text:'xx'}
credits:{
enabled:false
},
//对应的X轴上的数据和对应的比例值从后台方法获取数据
series: [{
type: 'column',
name: '有效性(%)',
color:'green',
data: [<%=validateValue %>] //从后台获取数据
}, {
type: 'column',
name: '无效性(%)',
color:'red',
data: [<%=inValidateValue %>]//从后台获取数据
}, {
type: 'pie', //饼状图
name: '总的比例',
data: [{
name: '总的无效次数(次)',
y: <%=ivd %>,
color: 'red'
}, {
name: '总的有效次数(次)',
y: <%=vd %>,//从后台获取数据
color: 'green'
}],
center: [0, -15], //相对位置
size: 80,//饼的大小
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
});
</script>
</head>
<body>
<form>
<div id="container" style="min-width: 400px; height: 500px; margin: 0 auto; margin-top:25px;">
</div>
<div style="margin-left:10px; position:absolute; margin-top:-60px; color: #000000; z-index:2000px; font-size: 12px;">
资源名称
</div>
</form>
</body>
<script src="../../js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../js/highcharts.js" type="text/javascript"></script>
<script src="../../js/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
//与DIV-container绑定数据
chart: {
renderTo: 'container'
},
//报表的标题
title: {
text: '资源数据分析',
x: -20
},
//副标题
subtitle: {
text: '数据有效性、无效性分析',
x: -20
},
//X轴数据和样式设置
xAxis: {
labels:{
rotation:-35, //倾斜度
align:'right'},
categories: [<%=xValue %>] //数据
},
//Y轴数据,Y轴的坐标值不用设置,HighCharts会根据我们的数据值自动建立比例
yAxis: {
title: { text: '所占比例(%)' }
},
//显示在报表每个节点上的值,如条形图的上方
plotOptions: {
//column定义为条形图上方 line定义为折线图上方
column: {
dataLabels: {
enabled: true,
style: {
fontSize: '12',
color:'red'
},
formatter: function() {
return this.y +'%';
}
}
}
},
//toolTip用于当鼠标放在对应节点上的数据
tooltip: {
formatter: function () {
var s;
if (this.point.name) {
s = '' +
this.point.name + ': ' + this.y;
} else {
s = '' +
this.x + ': ' + this.y + '%';
}
return s;
}
},
//以饼状图显示数据的总的比例时的标题信息
labels: {
items: [{
html: '总的比例',
style: {
left: '0px',
top: '30px',
color: 'black'
}
}]
},
//将右下角的highcharts.com禁用,也可以自定义设置值如credits:{href='#',text:'xx'}
credits:{
enabled:false
},
//对应的X轴上的数据和对应的比例值从后台方法获取数据
series: [{
type: 'column',
name: '有效性(%)',
color:'green',
data: [<%=validateValue %>] //从后台获取数据
}, {
type: 'column',
name: '无效性(%)',
color:'red',
data: [<%=inValidateValue %>]//从后台获取数据
}, {
type: 'pie', //饼状图
name: '总的比例',
data: [{
name: '总的无效次数(次)',
y: <%=ivd %>,
color: 'red'
}, {
name: '总的有效次数(次)',
y: <%=vd %>,//从后台获取数据
color: 'green'
}],
center: [0, -15], //相对位置
size: 80,//饼的大小
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
});
</script>
</head>
<body>
<form>
<div id="container" style="min-width: 400px; height: 500px; margin: 0 auto; margin-top:25px;">
</div>
<div style="margin-left:10px; position:absolute; margin-top:-60px; color: #000000; z-index:2000px; font-size: 12px;">
资源名称
</div>
</form>
</body>