您的位置：首页 > 编程语言 > Java开发

Highcharts柱状图动态数据展示

2017-07-18 12:26 169 查看

Highcharts柱状图动态数据展示：

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<link rel="stylesheet" href="js/bootstrap/css/bootstrap-theme.css" type="text/css"></link>
<link rel="stylesheet" href="js/bootstrap/css/bootstrap-theme.min.css" type="text/css"></link>
<link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" type="text/css"></link>
<link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css" type="text/css"></link>

<script type="text/javascript" src="js/easyui/jquery.min.js"></script>
<link rel="stylesheet" href="js/easyui/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="js/easyui/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="js/easyui/demo/demo.css" type="text/css"></link>
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="js/highcharts/highcharts-3d.js"></script>
<script type="text/javascript" src="js/highcharts/modules/exporting.js"></script>
<script type="text/javascript" src="js/highcharts/highcharts-plugins/highcharts-zh_CN.js"></script>
<script type="text/javascript" src="js/highcharts/themes/grid.js"></script>
<script type="text/javascript">
//首次访问自动加载本期保费、同期保费、增量保费柱状图
$(document).ready(function(){
$.post('ZengliangAction_selectZengliangData.action',
function(data){
var year = "";
var insurbody = "";
var bqPreminum = "";
var tqPreminum = "";
var zlPreminum = "";
$.each(data,function(i,d){
year = d.statistictime;
insurbody+="'"+d.insurBody+"',";
bqPreminum+=d.bqPreminum+",";
tqPreminum+=d.tqPreminum+",";
zlPreminum+=d.zlPreminum+",";
});
insurbody=insurbody.substring(0, insurbody.length - 1);
bqPreminum=bqPreminum.substring(0, bqPreminum.length - 1);
zlPreminum=zlPreminum.substring(0, zlPreminum.length - 1);
make_benqibaofei_zhuzhuang(year,insurbody,bqPreminum);
make_tongqibaofei_zhuzhuang(year,insurbody,tqPreminum);
make_zengliang_zhuzhuang(year,insurbody,zlPreminum);
}
)
});
</script>

<script type="text/javascript">
//增量市场份额饼状图
function makeZengliangScfe(){
$.post('ZengliangScfeAction_selectZengliangScfe.action',
function(data){
var year = "";
var insurbody_percentage = "";
$.each(data,function(i,d){
year = d.statisticTime;
insurbody_percentage += "['"+d.insurBody+" "+d.percentage+"%',"+d.percentage+"],";
}
)
insurbody_percentage = insurbody_percentage.substring(0,insurbody_percentage.length-1);
makeZenglingHight(year,insurbody_percentage);
}
);
}
makeZengliangScfe();
</script>

<script type="text/javascript">
//==============================
$(function(){
$("#time").combotree({
onChange:function(){
select();
}
});
})
//==============================

function select(){
var statistictime = $("#time").combotree("getText");//getValues是获取ID值，getText是获取文本值
makeZhuzhuangHigh(statistictime);
}

function refresh(){
$.post('ZengliangAction_refreshZengliangData.action',
function(){

}
)
}
</script>
</head>

<body>
<div class="container">
<div class="row clearfix" style="height:30px">
<form id="ff" method="post" class="form-inline" role="form" style="margin:0 0 0 -80px">
<select id="time" class="easyui-combotree" url="data/home_time_data.json" name="time" style="width:170px;height:20px;">
</select>
<a href="#" class="easyui-linkbutton" iconCls="icon-reload" style="width:78px;height:20px" onclick="refresh()">数据更新</a>

</form>
</div>
<div class="row clearfix">
<div class="col-md-5 column">
<div id="container-benqi-zhuzhuang" style="min-width:480px;max-width:520px;height:400px;"></div>
</div>
<div class="col-md-1 column"> </div>
<div class="col-md-5 column">
<div id="container-tongqi-zhuzhuang" style="min-width:480px;max-width:520px;height:400px"></div>
</div>
</div>

<div class="row clearfix">
<div class="col-md-6 column"> </div>
</div>

<div class="row clearfix">
<div class="col-md-5 column">
<div id="container-zengliang-zhuzhuang" style="min-width:480px;max-width:520px;height:400px;"></div>
</div>
<div class="col-md-1 column"> </div>
<div class="col-md-5 column">
<div id="container-zengliang-scfe" style="min-width:480px;max-width:520px;height:400px;"></div>
</div>
</div>

</div>

<script type="text/javascript">
function makeZhuzhuangHigh(statistictime){
$.post('ZengliangAction_selectZengliangData.action',
{
statistictime:statistictime
},
function(data){
var year = "";
var insurbody = "";
var bqPreminum = "";
var tqPreminum = "";
var zlPreminum = "";
$.each(data,function(i,d){
year = d.statistictime;
insurbody+="'"+d.insurBody+"',";
bqPreminum+=d.bqPreminum+",";
tqPreminum+=d.tqPreminum+",";
zlPreminum+=d.zlPreminum+",";
});
insurbody=insurbody.substring(0, insurbody.length - 1);
bqPreminum=bqPreminum.substring(0, bqPreminum.length - 1);
tqPreminum=tqPreminum.substring(0, tqPreminum.length - 1);
zlPreminum=zlPreminum.substring(0, zlPreminum.length - 1);
make_benqibaofei_zhuzhuang(year,insurbody,bqPreminum);
make_tongqibaofei_zhuzhuang(year,insurbody,tqPreminum);
make_zengliang_zhuzhuang(year,insurbody,zlPreminum);
}
);

$.post('ZengliangScfeAction_selectZengliangScfe.action',
{
statistictime:statistictime
},
function(data){
var year = "";
var insurbody_percentage = "";
$.each(data,function(i,d){
year = d.statisticTime;
insurbody_percentage += "['"+d.insurBody+" "+d.percentage+"%',"+d.percentage+"],";
}
)
insurbody_percentage = insurbody_percentage.substring(0,insurbody_percentage.length-1);
makeZenglingHight(year,insurbody_percentage);
}
);

}
</script>
<script type="text/javascript">
//本期保费柱状图
function make_benqibaofei_zhuzhuang(year,insurbody,bqPreminum){
$('#container-benqi-zhuzhuang').highcharts({
chart: {
type: 'column'
},
subtitle: {
text: '数据来源: 西藏保险行业协会【单位：万元】'
},
title: {
text: year+'-各保险主体本期保费示意图 '
},
xAxis: {
categories: eval("["+insurbody+"]")
},
yAxis: {
title:''
},
plotOptions:{
series:{
borderRadius: 5,
dataLabels:{
enabled:true
}
}
},
credits: {
enabled: false
},
series: [{
name: '本期保费',
data: eval("["+bqPreminum+"]"),
color:'#058DC7'
}]
});
}

//同期保费柱状图
function make_tongqibaofei_zhuzhuang(year,insurbody,tqPreminum){
$('#container-tongqi-zhuzhuang').highcharts({
chart: {
type: 'column'
},
subtitle: {
text: '数据来源: 西藏保险行业协会【单位：万元】'
},
title: {
text: year+'-同期-各保险主体同期保费示意图 '
},
xAxis: {
categories: eval("["+insurbody+"]")
},
yAxis: {
title:''
},
plotOptions:{
series:{
borderRadius: 5,
dataLabels:{
enabled:true
}
}
},
credits: {
enabled: false
},
series: [{
name: '本期保费',
data: eval("["+tqPreminum+"]"),
color:'#8085e9' //#8085e9 #2b908f
}]
});
}

//增量保费柱状图
function make_zengliang_zhuzhuang(year,insurbody,zlPreminum){
$('#container-zengliang-zhuzhuang').highcharts({
chart: {
type: 'column'
},
title: {
text: year+'-各保险主体增量保费示意图'
},
subtitle: {
text: '数据来源: 西藏保险行业协会【单位：万元】'
},
xAxis: {
categories: eval("["+insurbody+"]")
},
yAxis: {
title:''
},
plotOptions:{
series:{
borderRadius: 5,
dataLabels:{
enabled:true
}
}
},
credits: {
enabled: false
},
series: [{
name: '增量保费',
data: eval("["+zlPreminum+"]"),
color:'#50B432'
}]
});
}

</script>

<script type="text/javascript">
//增量市场份额饼状图
function makeZenglingHight(year,insurbody_percentage) {
// Radialize the colors

// 构建图表
$('#container-zengliang-scfe').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true
},
title: {
text: year+'-西藏地区各保险主体【增量】市场份额'
},
subtitle: {
text: '注：若增量份额为0或负值时，以显示数据为准'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
showInLegend: true
}
},

series: [{
type: 'pie',
name: '增量份额',
data: eval("["+insurbody_percentage+"]")
}]
});
}
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： struts2.0 highcharts action SQLserver

相关文章推荐

新的分享

章节导航