首页 » SQL Server » highcharts折线图动态数据展示

highcharts折线图动态数据展示

原文 http://blog.csdn.net/gslzydwgh/article/details/75291621

2017-07-18 14:20:09阅读(558)

highcharts折线图动态数据展示:
highcharts折线图动态数据展示

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
		<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.min.js"></script>
        <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
        <link rel="stylesheet" href="js/myself/easyui-bootstrap.css" type="text/css"></link>
        <script type="text/javascript" src="js/highcharts/highcharts.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">
 $(document).ready(function() {
     $.post('ScfeHighChartsZheXianAction_selectScfe.action',
     function(data){
     dataTmp = "";
     year = "";
     browsers = [],
                        //迭代,把异步获取的数据放到数组中
                        $.each(data,function(i,d){
                        year=d.statisticTime;//获取时间
                        browsers.push([d.insuBody,d.scfeMothBigDecimals]);           
                        dataTmp += "{name: '" + d.insuBody + "',data: ["+d.scfeMothBigDecimals+"]}" + ",";
                        });
                            //去除最后一个字符
                        dataTmp=dataTmp.substring(0, dataTmp.length - 1);
                        GetData(dataTmp,year);
     }
   )
 });
   //=====================================
   $(function(){
   $("#year").combobox({
   onChange:function(){
   select();
   }
   });
   });
   //=====================================
   
   function savereg(){
     var aa = $('#year').combobox('getText');
     $.post('RefreshScfeAction_refreshScfe.action',
        function(){
        
        }
     )   
   }
   
   function select(){
   //传时间参数给后台action
   var yearString =$('#year').combobox('getText');
   makeHighChart(yearString);
   }
 </script>
</head>
<body>
  <form id="ff" method="post" class="form-inline" role="form">
展示年份: 
<select id="year" class="easyui-combobox" name="year" style="width:80px;height:20px;">
				<option value=""></option>
				<option value="2012">2012</option>
				<option value="2013">2013</option>
				<option value="2014">2014</option>
				<option value="2015">2015</option>
				<option value="2016">2016</option>
				<option value="2017">2017</option>
				<option value="2018">2018</option>
				<option value="2019">2019</option>
				<option value="2020">2020</option>
				<option value="2021">2021</option>
				<option value="2022">2022</option>
				<option value="2023">2023</option>
				<option value="2024">2024</option>
				<option value="2025">2025</option>
			</select>
			<a href="#" class="easyui-linkbutton" iconCls="icon-reload" style="width:78px;height:20px" onclick="savereg()">数据更新</a>
 </form>
          
<div id="container" style="width: 1000px; height: 380px; margin: 0 auto"></div>
<label>
【操作提示】:<br>
①若有数据更新,请点击"数据更新"按钮更新数据库中的视图数据<br>
②可点击右侧保险主体,查看单个保险主体数据,点击右上方按钮,可对趋势图进行下载
</label>
<script language="JavaScript">
function makeHighChart(yearString){
    $.post('ScfeHighChartsZheXianAction_selectScfe.action',
     {
     yearString:yearString
     },
     function(data){
     var year = "";
     dataTmp = "";
     browsers = [],
                        //迭代,把异步获取的数据放到数组中
                        $.each(data,function(i,d){
                        year=d.statisticTime;//获取时间
                        browsers.push([d.insuBody,d.scfeMothBigDecimals]);           
                        dataTmp += "{name: '" + d.insuBody + "',data: ["+d.scfeMothBigDecimals+"]}" + ",";
                        });
                            //去除最后一个字符
                        dataTmp=dataTmp.substring(0, dataTmp.length - 1);
                        GetData(dataTmp,year);
     }
   )
}
function  GetData(dataTmp,year){
   var json = {};
   json.title =  {
      text: year+'年-各保险公司市场份额占比趋势图'   
   };
   json.subtitle = {
            text: '数据来源: 西藏保险行业协会'
        },
   json.xAxis = {
      categories: ['一月', '二月', '三月', '四月', '五月', '六月',
         '七月', '八月', '九月', '十月', '十一月', '十二月']
   };
   json.yAxis =  {
      title: {
         text: 'Percentage (%)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]
   };
 
  json.legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };
 
   var title = {
      text: '各保险公司市场份额占比趋势图'   
   };
    json.tooltip = {
      valueSuffix: '%'
   };
   
   json.series = eval("[" + dataTmp + "]") ;
   $('#container').highcharts(json);
}
</script>
</body>
</html>


最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹