FusionCharts

最新推荐文章于 2023-08-07 11:29:40 发布

原创最新推荐文章于 2023-08-07 11:29:40 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

FusionCharts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个实时数据图表与查询系统，通过AJAX请求获取近一天、近一周和近一月的数据，并使用FusionCharts绘制图表。系统还支持自定义查询时间段，提供线性图表和表格展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script src="js/jquery.min.js"></script>
    <script src="charts/FusionCharts.js" type="text/javascript"></script>
    <script src="jquery-ui/js/jquery-ui.js"></script>
	<script src="jquery-ui/js/jquery.ui.datepicker-zh-CN.js"></script>
	<link href="jquery-ui/css/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script>
    var nd=new Date();
    function day(){
    	var ChartId = "dayChart";
    	$.ajax({
			url:"/cms/acquisit/nearlyDay",
			success:function(res){
				if(res){
					var dayChart = new FusionCharts("charts/Bar2D.swf", ChartId, "250", "250", "0", "0");
					dayChart.setXMLData(res);
					dayChart.render("dayLayout");
				}
			}		
		});
    }
    
    function week(){
    	var ChartId = "weekChart";
    	$.ajax({
			url:"/cms/acquisit/nearlyWeek",
			success:function(res){
				if(res){
					var weekChart = new FusionCharts("charts/Bar2D.swf", ChartId, "250", "250", "0", "0");
					weekChart.setXMLData(res);
					weekChart.render("weekLayout");
				}
			}		
		});
    }
    
    function month(){
    	var ChartId = "monthChart";
    	$.ajax({
			url:"/cms/acquisit/nearlyMonth",
			success:function(res){
				if(res){
					var monthChart = new FusionCharts("charts/Bar2D.swf", ChartId, "250", "250", "0", "0");
					monthChart.setXMLData(res);
					monthChart.render("monthLayout");
				}
			}		
		});
    }
    
    function refEven(){
  		getChartFromId("dayChart").setXMLUrl("/cms/acquisit/nearlyDay");
  		getChartFromId("weekChart").setXMLUrl("/cms/acquisit/nearlyWeek");
  		getChartFromId("monthChart").setXMLUrl("/cms/acquisit/nearlyMonth");
    }
    
    function qLine(){
    	var sdate = $("#startDate").val();
    	var edate = $("#endDate").val();
    	$.ajax({
			url:"/cms/acquisit/queryChart",
			data: {startDate:sdate,endDate:edate},
			success:function(res){
				if(res){
					var queryChart = new FusionCharts("charts/MSLine.swf", "queryChart", "600", "300", "0", "0");
					queryChart.setXMLData(res);
					queryChart.render("queryLayout");
				}
			}
		});
    }
    
        
 	function qTable(){ 		
    	//var sdate = $("#startDate").val()+" 00:00:00";
    	//var edate = $("#endDate").val()+" "+nd.getHours()+":"+nd.getMinutes()+":"+nd.getSeconds();
    	var sdate = $("#startDate").val();
    	var edate = $("#endDate").val();
    	if(sdate.substring(0,4)!=edate.substring(0,4)){
    		alert("不推荐跨年查询!");
    		return;
    	}
    	$(".trs").html("");
    	$.ajax({
			url:"/cms/acquisit/queryList",
			data: {startDate:sdate,endDate:edate},
			success:function(res){
				if(res.data){
					$.each(res.data, function(i, field){
						$("#lltable").append("<tr class='trs'><td>"+field.cname+"</td><td>"+field.times+"</td></tr>");
					});
				}
			}		
		});
				
    }
    
    $(document).ready(function(){
		day();
		week();
		month();
		setInterval('refEven()',10000);
		
		var today = nd.getFullYear()+"-"+(nd.getMonth()+1)+"-"+nd.getDate();
		$("#startDate").val(today);
		$("#endDate").val(today);
		
		$("#startDate").datepicker();
		$("#endDate").datepicker();
		
		qTable();
		qLine();
		$("#btn").click(
			function(){				
				qTable();
				var sdate = $("#startDate").val();
    			var edate = $("#endDate").val();
				getChartFromId("queryChart").setXMLUrl("/cms/acquisit/queryChart?startDate="+sdate+"&endDate="+edate);
        	}
        );
    });
    </script>
    <style>
    	body {margin:0; padding:0; font:12px/1.5 \5b8b\4f53,Arial,sans-serif;}
    	.clean{clear:both;height:0; display:block; overflow:hidden;}
    	.fl{float:left;}
    	.w{width:780px;padding:10px;}
    	.q{margin-bottom:10px;}
    	.tab_lay{width:170px;margin-left:10px;}
    	.line_lay{width:600px;}
    	.tab_class {
		    border: 1px none #333333;
		    border-collapse: collapse;
		    color: #333333;
		    width: 100%;
		}
		.tab_class td {
		    height: 35px;
		    padding-left: 5px;
		}
		.tab_class th {
		    background: none repeat scroll 0 0 #CCCCCC;
		    height: 30px;
		}
		.tab_class .timTD{width:90px;word-break:break-all;}
    	.frm{margin:10px;}
    	.chartLay{border: 1px solid #333333;}
    	.realInfo{height:25px;line-height:25px;background:#CCCCCC;margin-bottom:5px;}
    </style>
</head>

<body>
	<div class="w">
		<div class="q">
			<form id="qFrm" class="frm">
				开始日期:<input type="text" id="startDate" readonly value=""/> 结束日期:<input type="text" id="endDate" readonly/>
				<input type="button" value="查询" id="btn" />
			</form>
			<div id="queryLayout" class="fl line_lay">Loading</div>
			<div class="fl tab_lay">
				<table id="lltable" width="100%" cellspacing="1" cellpadding="1" border="1" class="tab_class">
			        <tr style="text-align:left;">
			            <th style="width:50px;padding-left:5px;">名称</th>
			            <th style="padding-left:5px;">次数</th>
			        </tr>
				</table>
			</div>
			<div class="clean"></div>
		</div>
		<div class="chartLay">
			<div class="realInfo">实时信息(每隔10秒刷新)</div>
			<div id="dayLayout" style="float:left;width:250px;margin-right:10px;">Loading</div>
			<div id="weekLayout" style="float:left;width:250px;margin-right:10px;">Loading</div>
			<div id="monthLayout" style="float:left;width:250px;">Loading</div>
			<div class="clean"></div>
		</div>
	</div>
	
</body>
</html>