柱状图页面的设计

最新推荐文章于 2024-03-04 11:06:54 发布
最新推荐文章于 2024-03-04 11:06:54 发布
阅读量310 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LoveJava_xss/article/details/110000882
版权
本文介绍如何在JSP页面中设计并实现柱状图的展示，详细讲解了相关技术和步骤。
摘要由CSDN通过智能技术生成

JSP页面
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./plugins/layui/css/layui.css">
<link rel="stylesheet" href="./css/style.css">
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script src="./js/layui-v2.1.5/layui/layui.js"></script>
<%@include file="/common/head_jccx.jsp"%>
<script src="js/jquery.myPagination.js"></script>
<style type="text/css">
button:hover {
   
    cursor: pointer;
}
.ssrd:hover{
   
 cursor: pointer;
 color:#ff6600;
}
hr {
   
    height: 1px;
    margin: 10px 0;
    border: 0;
    background-color: #ff6600;
    clear: both;
}
.dataafter>th {
   
    text-align: center;
    color: #000; */
    border-bottom: #FF6400 2px solid;
    border-top: none; 
    border-right:none;
    border-left:none;
    background: #f2f2f2;
}
.layui-table tbody td{
   
    border: 1px solid #dcdcdc;
    border-left: none;
    border-right: none;
}
</style>
<script type="text/javascript">
	layui.use(['element', 'table','laydate'], function(){
   
		  var element = layui.element,table = layui.table;
		  var laydate = layui.laydate;
		  laydate.render({
   
			    elem: '#nianFen',
			    theme:'#ff6600'
			    ,type: 'year'
			    ,btns: ['now', 'confirm']
			    ,done: function(value, date, endDate){
   
			    	  $('#nianFen').val(date.year);
			    	  var year = date.year;
			    	  initJcsxData(year);
						initJcsxType(year);
						getJcsxData('','');
			   }
			  });
	});
	
</script>
<script type="text/javascript">
	$(function(){
   
		//决策事项分类 数量初始化
		loadSearchHeatList();
		initJcsxType(null);
		initJcsxData(null);
		initJCCK();
		initData();
		initPage2();
		//专题滚动
		tableScroll('gunDongZT', 300, 30, 1);
		//模块点击统计量
		modelEchart();
		initTJReportData();

		//获取决策专题更新日期
		$.ajax({
   
			url:'<%=basePath%>shouye/getDeptAndTime.do',
			success: function(data){
   
				for(var k in data){
   
					 $('#'+k).text(data[k]);  
				}
			}
		});
		
	});
	
	function tableScroll(tableid, hei, speed, len) {
   
		var MyMarhq;
		clearInterval(MyMarhq);
	    $('#' + tableid).parent().find('.tableid_').remove()
	    $('#' + tableid).parent().prepend(

	    ).css({
   
	        'position': 'relative',
	        'overflow': 'hidden',
	        'height': hei + 'px'
	    })
	    $(".tableid_").find('th').each(function(i) {
   
	        $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
	    });
	    $(".tableid_").css({
   
	        'position': 'absolute',
	        'top': 0,
	        'left': 0,
	        'z-index': 9
	    })
	    $('#' + tableid).css({
   
	        'position': 'absolute',
	        'top': 0,
	        'left': 0,
	        'z-index': 1
	    })

	    if ($('#' + tableid).find('tbody tr').length > len) {
   
	        $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
	        $(".tableid_").css('top', 0);
	        $('#' + tableid).css('top', 0);
	        var tblTop = 0;
	        var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();

	        function Marqueehq() {
   
	            if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
   
	                tblTop = 0;
	            } else {
   
	                tblTop -= 1;
	            }
	            $('#' + tableid).css('margin-top', tblTop + 'px');
	            clearInterval(MyMarhq);
	            MyMarhq = setInterval(function() {
   
	                Marqueehq()
	            }, speed);
	        }

	        MyMarhq = setInterval(Marqueehq, speed);
	        $('#' + tableid).find('tbody').hover(function() {
   
	        	clearInterval(MyMarhq);
	        }, function() {
   
	        	clearInterval(MyMarhq);

	                MyMarhq = setInterval(Marqueehq, speed);

	        })
	    }

	}

	function clickLi(initTreeId){
   
		$(this).css({
   'background-color':'#FFF'});
		initzbeCharts(initTreeId);
	}
	
	function initTJReportData(){
   
		$.ajax({
   
			url : '<%=basePath%>sysLog/getLatestMonthLog.do',
			success : function(data){
   
				if (data.length!=0){
   
					$('#unitTJ').text(data[0].createrOrgName);
					$('#timeTJ').text(data[0].createDateTime.substring(0,10));
				} else {
   
					$("#newReportData").html();
				}
			}
		});
	}
	
	// 加载 决策事项 
	function initJcsxData(nianfen){
   
		if (nianfen != null ){
   
			var nianfen = nianfen;
		} else {
   
			var nianfen = $('#nianFen').val();
		}
		$.ajax({
   
			url : '<%=basePath%>decision/getJcStatisticalData.do',
			data : {
   
				"year" : nianfen
			}, 
			success : function(data) {
   
				$("#allSum").text(data.ALLSUM);	
				$("#overSum").text(data.OVERSUM);
				$("#runSum").text(data.RUNSUM+data.OVERSUM);
				$("#noRunSum").text(data.NORUNSUM);
				$.ajax({
   
					url : '<%=basePath%>decision/getMJccxStatus.do',
					data : {
   
						"sxNianFen" : $('#nianFen').val()
					},
					success : function(data){
   
						$("#jzzh").text(data.CSZX);
						$("#ywc").text(data.ZCNUM);
					}
				});
				

			}    
		});
	}
	
	//加载各决策事项分类值
	function initJcsxType(nianfen){
   
		if (nianfen != null ){
   
			var nianfen = nianfen;
		} else {
   
			var nianfen = $('#nianFen').val();
		}
		$.ajax({
   
			url : '<%=basePath%>common/selectMJcsxVO.do',
			data : {
   
				"nianfen" : nianfen
			}, 
			success : function(data) {
   
				var dataVlaue = eval("(" + data + ")");
				var dataObjy = eval(dataVlaue.ydata);
				var dataObjz = eval(dataVlaue.zdata);
				$("#jjfz").text(dataObjy[0]+dataObjz[0]);
				$("#msbz").text(dataObjy[1]+dataObjz[1]);
				$("#sthb").text(dataObjy[2]+dataObjz[2]);
				$("#pajs").text(dataObjy[3]+dataObjz[3]);
				$("#tpgj").text(dataObjy[4]+dataObjz[4]);
				$("#qt").text(dataObjy[5]+dataObjz[5]);
			
				var wwc = 0;
				var ywc = 0;
				
				for (x in dataObjy)
				{
   
					 wwc += dataObjy[x]; 
				}
				for (y in dataObjz)
				{
   
					 ywc += dataObjz[y]; 
				}
				
				
			var option4 = {
   
					tooltip : {
   
				        trigger: 'axis',
				        formatter: function (params){
   
				            return params[0].name + '<br/>'
				                   + params[0].seriesName.substring(0,3) + ' : ' + params[0].value + '<br/>'
				                   + params
最低0.47元/天 解锁文章
LoveJava_xss
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSP调用Java Bean在网页上动态生成柱状图
02-23
--------------------------------------------------------------------------------我们经常要在网页看到一些动态更新的图片,最常见的莫过于股票的K线图,本文试图通过一个简单的实例,向大家展示如何通过JSP 调用Java Bean在网页上动态生成柱状图.背景:本人最近在为某统计局开发项目时,涉及到在网页上动态生成图片的问题,费了一天的时间,终于搞定,为帮助大家在以后遇到同样的问题时不走弯路,现将设计思想及源代码公布出来,与大家共勉.以下代码在Windows2000成功测试通过,Web应用服务器采用Allaire公司的Jrun3.0
html柱状图代码效果不出来,纯CSS实现美观大方的网页柱状图效果
weixin_39969006的博客
06-03 280
本文实例讲述了纯CSS实现美观大方的网页柱状图效果。分享给大家供大家参考。具体如下：这是一款用纯CSS代码实现的网页柱状图，随着你给出的数据柱状图的调试会变化，实际应用中你可以将生成柱状图的数据从数据库中取得，这样就可以适时显示了，这款柱状图结构清淅，用背景图片平铺，给人很直观的感觉。复制代码代码如下:CSS柱状图body {padding:0;margin:40px;font-size:9pt;...
网页柱形图表
末安的博客
10-19 969
欢迎收看《好看的博客没人赞》系列 这篇博客将为各位看官做一个柱形图表的样式。 首先展示一波效果图提高一下大家的兴趣： 这里没有使用其他jar包，而是采用css画出来的，也就是说，这里是采用定位的方式制作图表。 咋们分析一波柱形图是怎样组成的：如上图，左侧为ul竖版样式，下方为ul横版样式，图中的虚线格子是由6个div拼凑而成的，由上往下前5个div属性是：边框虚线，大小一致，下边框隐藏；最下面的div属性：只显示上边框，长铺满，边框虚线；再到图中的柱子，也是由5个div定位而成，长一致，高为0.
柱状图页面
xiaoqing19910812的博客
12-10 626
@layout("/common/_container.html"){ &lt;div class="row"&gt; &lt;div class="col-sm-12"&gt; &lt;div class="ibox float-e-margins"&gt; &lt;div class="ibox-title&q
layui柱状图tooltip获取x轴和y轴数据
最新发布
SurepMan的博客
03-04 416
【代码】layui柱状图获取tooltip获取x轴和y轴数据。
javaweb柱状图
05-12
通过构建SVG元素，我们可以创建出柱状图，并将其嵌入到HTML或者JSP页面中。 3. **JavaScript库**： - **Highcharts**：这是一个纯JavaScript库，可以方便地在网页中创建交互式的柱状图。在JSP中，我们可以通过AJAX...
Asp生成柱状图实例代码
10-14
你可以调整颜色和长宽比例，使得柱状图更加符合你的设计需求或数据特点。颜色的改变可以通过修改图形库中的参数实现，比如设置每个柱体的颜色值；长宽比例的调整则涉及到柱体的高度和宽度，这可能需要调整计算柱体...
柱状图echarts图表及点击事件
12-11
在实际应用中，可能还需要考虑柱状图的动态加载、数据更新、响应式设计等问题。ECharts提供了`setOption`方法用于动态更新图表配置，以及适应不同设备和屏幕尺寸的布局策略。 最后，压缩包中的"test"文件可能是包含...
精致彩色立体PPT柱状图图表
07-16
【精致彩色立体PPT柱状图图表】是一种广泛应用于数据可视化和信息传递的图形表示方式。在商业报告、学术研究、市场分析等场景中，这种图表能够清晰地展示各项数据的对比关系，使复杂的统计数据变得直观易懂。PPTX是...
echartDemo柱状图折线图详解
10-12
总结，ECharts是一个强大且灵活的JavaScript数据可视化工具，适合在C#环境下与前端页面进行数据交互，创建出各种类型的图表，如柱状图和折线图，帮助用户更好地理解、分析和展示数据。通过学习ECharts的API和配置项...
Web Echarts+layui 统计图表demo实例 (统计深圳市旅游景点信息)
10-14
使用Echarts+layui+html 开发数据统计图表，demo中统计的数据是深圳市旅游景点分析统计，内有深圳地图统计，饼图统计，柱状图统计，漏斗图统计，玫瑰饼图统计等图形展示
layui 有柱状图吗_tp3.2+layui+echarts 应用实例
weixin_42355387的博客
12-29 1389
//柱状图layui.use(['carousel', 'echarts'], function(){var $ = layui.$,admin = layui.admin,carousel = layui.carousel,echarts = layui.echarts; //标准柱状图admin.req({url: 'XXXX',type: 'get',contentType: 'a...
layuiAdmin + echarts动态数据：柱状图 应用
草巾冒小子的博客
08-19 3096
layuiAdmin + echarts动态数据：柱状图 开发（含案例、代码、截图） 项目需求：用layuiAdmin框架写的后台，需要把返回的基金数据用echarts模块，实现页面可视化与数据实时更新。 对于echarts.js官方而言，单独实现这个官方demo看似很轻松； 但问题是，如何在layuiAdmin框架内整合该模块进而实现需要的功能？ 一、案例截图： 二、文件bar.js代码： /** @Name：layuiAdmin EchartsV5.0+集成 @Author：前端技
Layui 和 echars 之 实现饼状图，柱状图，折线图
qq_39835505的博客
08-11 9663
参考网址 https://blog.csdn.net/qq_36949176/article/details/105602351 实现 引入 <script src="_PUBLIC_/layui/layui.js" charset="utf-8"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script> body 中
利用ajax结合highchart和Spring实现数据可视化中的柱状图
current_person的博客
01-19 1199
1.实现jsp页面 <% String path = request.getContextPath(); %> 任务列表 var path = ''; <script type="text/javascript" src="/js/logoperate/jquery.min.js"> <script type="text/javasc
各类图形报表html（layui）
qq_41616049的博客
12-06 1626
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>首页</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name...
jreeChart柱状图实例解析
yumingxian2020的专栏
08-17 3259
<br />一、zhutunew.jsp<br /> <br /><%@ page contentType="text/html;charset=GBK"%><br /><%@ page import="org.jfree.chart.ChartFactory,<br />                 org.jfree.chart.JFreeChart,<br />                 org.jfree.chart.plot.PlotOrientation,<br />         
基于Layui弹出层图表分析
热门推荐
愤怒的码农
11-26 1万+
数据可视化可以让数据更加清晰，所以这期我们看如何基于Layui弹出层让数据可视化。实现的效果如下图所示 实现的功能：1、图表类型的切换                         2、数据项配置项 准备工作：1、echarts（这里我采用的是Layui后台管理模板自带的。但是我使用时发现使用百度echarts的api竟然也可以                           ...
在html中使用Echarts.js绘制柱状图
weixin_45092437的博客
11-29 3535
1. 横坐标为作业名称，作业名称一行6个字符，最多两行，超出显示省略号。 2. 纵坐标为百分比数字，分为5个刻度，且每个刻度在坐标系中都有延伸虚线。 3. 柱状图默认为半透明的蓝色，鼠标hover之后变色，并以浮窗的形式展示该条数据的相关信息。 4. 当数据量超过10条时，x轴下面有横向滚动条，默认每屏展示10条数据，数据之间的间距相等，可以通过滚动条来滚动查看前后的数据。
arcengine土层柱状图
04-01
ArcEngine是一款GIS开发工具，...5. 显示图形元素：使用ArcEngine中的地图控件或布局控件，将土层柱状图显示在地图或页面上。 以上是ArcEngine实现土层柱状图的基本步骤，具体实现还需要根据实际需求进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值