highcharts饼状图数据库动态数据显示

最新推荐文章于 2024-06-23 07:11:34 发布

gslzydwgh

最新推荐文章于 2024-06-23 07:11:34 发布

阅读量4.4k

点赞数

文章标签： struts2.0 highcharts SQLserver action

本文链接：https://blog.csdn.net/gslzydwgh/article/details/75269295

版权

本文介绍如何使用Highcharts库结合Struts2.0框架，从SQL Server数据库中获取数据并动态展示在饼状图上。通过在JSP页面中引用必要的js和css库，然后在Action中处理SQL查询，将结果传递到前端进行图表渲染。

摘要由CSDN通过智能技术生成

用highcharts饼状图动态展示后台数据中的检索到的数据：

1、js/bootstrap/css/bootstrap（可根据实际情况确定是否下载）

2、js/highcharts/highcharts.js（必须下载）

本人代码中的js是项目所需，若你的项目不需要本代码中的js，可根据自行情况删除，但是highcharts必须下载，用于展示饼状图的代码是直接从官网上复制过来，只需修改数据部分，具体如下：

jsp代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
	<meta charset="UTF-8">
	<title>Auto Height for Layout - jQuery EasyUI Demo</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>
 <script type="text/javascript" src="js/highcharts/highcharts.js"></script> 
  <script type="text/javascript" src="js/myself/tool.js"></script>
    <script type="text/javascript" src="js/myself/tooltongqi.js"></script>
<link rel="stylesheet" href="js/easyui/themes/gray/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/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/sand-signika.js"></script>
 	<script type="text/javascript">
 	//2017年3月15日添加，触发select选项后自动触发事件，不用单独点击按钮
    $(function() {
     $("#time").combotree({
        onChange:function(){
       savereg();
       }
     });
    });
    
	function savereg(){	
		var statisticTimeStr = $('#time').combotree('getText')
	    //alert(statisticTimeStr); 
            //查询参数直接添加在queryParams中     
            $('#scfeBenqi').datagrid({  
                url:"ScfeBenqiAction_selectBenQiDataGrid.action?statisticTimeStr=" + statisticTimeStr  
            })  
            $('#scfetongqi').datagrid({  
                url:"ScfeTongqiAction_selectTongQDataGrid.action?statisticTimeStr=" + statisticTimeStr  
            })  
           $("#scfeBenqi").datagrid('reload');
           $("#scfetongqi").datagrid('reload'); 
           makeHighChart(statisticTimeStr);
           makeHighCharttonqi(statisticTimeStr);
		}
	</script>         
 </head>   
<body>
	
<div class="container">
        <div class="row clearfix" style="height:30px">
        <div class="col-md-12 column">
         <form id="ff" method="post" class="form-inline" role="form" >
                     统计时间：<select id="time" class="easyui-combotree" url="data/home_time_data.json" name="time" style="width:170px;height:20px;">
		 </select>    注:若所选择时间无数据，饼状视图不刷新		
          </form>
            </div>
		 </di