Highcharts柱状图动态数据展示

最新推荐文章于 2025-06-03 09:09:19 发布
原创最新推荐文章于 2025-06-03 09:09:19 发布 · 3.3k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#struts2.0 #highcharts #action #SQLserver
本文介绍了一个使用Highcharts实现的动态数据展示系统，该系统能够根据用户选择的时间段，动态加载并显示保险行业的保费数据。具体包括本期保费、同期保费、增量保费的柱状图以及增量市场份额的饼状图。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
Highcharts柱状图动态数据展示：
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>

<!-- 后期需要将两个select中的地市和保险主体放到外部的json中处理，后期优化 -->

<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>