JQuery以及highchart与后台数据交互

川长思鸟来 2022-05-21 01:55 188阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
    <html debug="true">
    <head>
    <title>Highcharts Demo - Basic line</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link rel="shortcut icon" href="/favicon.ico" />
    <script type="text/javascript" src="highcharts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    	jQuery.noConflict();
    </script>
    
    <script type="text/javascript" src="/highslide/highslide-full.min.js"></script>
    <script type="text/javascript" src="/highslide/highslide.config.js"
    	charset="utf-8"></script>
    <script type="text/javascript">
    	var example = 'line-basic', theme = 'skies';
    </script>
    <script type="text/javascript" src="/demo/scripts.js"></script>
    <link rel="stylesheet" href="/templates/yoo_symphony/css/template.css"
    	type="text/css" />
    <link rel="stylesheet"
    	href="/templates/yoo_symphony/css/variations/brown.css" type="text/css" />
    <link href="/demo/demo.css" rel="stylesheet" type="text/css" />
    <script src="charts/chart1.js" type="text/javascript"></script>
    </head>
    <body>
    	<script src="highcharts/highcharts.js"></script>
    	<script src="highcharts/exporting.js"></script>
    	<div id="container"
    		style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    	<div style="margin: 1em">
    		<div class="buttons">
    			<div class="highslide-maincontent"></div>
    		</div>
    	</div>
    </body>
    </html>

(function($) { // encapsulate jQuery
    
    	$(function() {
    		var chart;
    		$(document)
    				.ready(
    						function() {
    							chart = new Highcharts.Chart({
    								chart : {
    									renderTo : 'container',
    									type : 'line',
    									marginRight : 130,
    									zoomType : 'xy',//
    									marginBottom : 25
    								},
    								title : {
    									text : '交易与税收情况',
    									x : -20
    								// center
    								},
    								subtitle : {
    									text : ' ',
    									x : -20
    								},
    								xAxis : {
    									categories : [ '1月', '2月', '3月', '4月',
    											'5月', '6月', '7月', '8月', '9月',
    											'10月', '11月', '12月', '1月', '2月',
    											'3月', '4月', '5月', '6月', '7月', '8月',
    											'9月', '10月', '11月', '12月' ]
    								},
    								yAxis : {
    									title : {
    										text : '金额 (万元)'
    									},
    									plotLines : [ {
    										value : 0,
    										width : 1,
    										color : '#808080'
    									} ]
    								},
    								tooltip : {
    									formatter : function() {
    										return '<b>' + this.series.name
    												+ '</b><br/>' + this.x + ': '
    												+ this.y + '万元';
    									}
    								},
    								legend : {
    									layout : 'vertical',
    									align : 'right',
    									verticalAlign : 'top',
    									x : -10,
    									y : 100,
    									borderWidth : 0
    								},
    								series : [
    										{
    											name : '2011年纳税总额',
    											type : 'column',
    											data : [ 1.0, 3.9, 3.5, 4.5, 4.4,
    													4.5, 9.4, 11.5, 5.3, 5.3,
    													11.5, 5.3, 5.3 ]
    										},
    										{
    											name : '2011年交易总额',
    											data : [ 7.0, 6.9, 9.5, 14.5, 18.2,
    													21.5, 25.2, 26.5, 23.3,
    													18.3, 18.3, 18.3 ]
    										},
    										{
    											name : '2012年纳税总额',
    											type : 'column',
    											data : [ 8.0, 5.9, 7.5, 16.5, 16.2,
    													27.5, 23.2, 21.5, 21.3,
    													18.3, 18.3, 18.3 ]
    										},
    										{
    											name : '2012年交易总额',
    											data : [ 8.0, 9.9, 19.5, 4.5, 8.2,
    													21.5, 4.2, 36.5, 13.3,
    													18.34, 18.3, 18.3 ]
    										} ]
    							});
    							var district = encodeURI(encodeURI("北塘区"));
    							var city = encodeURI(encodeURI("无锡市"));
    							var industry = encodeURI(encodeURI("零售业"));
    							var str = "53.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4";
    							var buf;
    							var data0 = [  ];
    							var data1 = [  ];
    							var data2 = [  ];
    							var data3 = [  ];
    							function getForm() {
    								jQuery.getJSON(
    										'taxStatisticAction.do?actionType=getDetailStatisticData&district='
    												+ district + '&city=' + city
    												+ '&industry=' + industry
    												+ '&year=2011', null, function(
    												data) {
    											buf = data.TaxAmount.split(",");
    											for (i = 0; i < buf.length; i++) {
    												data0[i] = parseFloat(buf[i]);
    											}
    											chart.series[0].setData((data0),
    													true);
    											buf = data.TotalAmount.split(",");
    											for (i = 0; i < buf.length; i++) {
    												data1[i] = parseFloat(buf[i]);
    											}
    											chart.series[1].setData((data1),
    													true);
    
    										});
    								jQuery.getJSON(
    										'taxStatisticAction.do?actionType=getDetailStatisticData&district='
    												+ district + '&city=' + city
    												+ '&industry=' + industry
    												+ '&year=2012', null, function(
    												data) {
    											buf = data.TaxAmount.split(",");
    											for (i = 0; i < buf.length; i++) {
    												data2[i] = parseFloat(buf[i]);
    											}
    											chart.series[2].setData((data2),
    													true);
    											buf = data.TotalAmount.split(",");
    											for (i = 0; i < buf.length; i++) {
    												data3[i] = parseFloat(buf[i]);
    											}
    											chart.series[3].setData((data3),
    													true);
    
    										});
    							}
    							getForm();
    							// $(document).ready(function() {
    							// // 每隔3秒自动调用方法，实现图表的实时更新
    							// window.setInterval(getForm, 3000);
    							//
    							// });
    						});
    
    	});
    
    })(jQuery);

后台

public String getDetailStatisticData(String city, String district,
    			String industry,String year) {
    
    		List<Statistic> statisticList = statisticDAO.findDetailStatisticData(
    				city, district, industry,year);
    		JSONHelper json = new JSONHelper();
    		json.setSuccess(true);
    		String TaxAmount = "";
    		String TotalAmount="";
    		if (statisticList != null || statisticList.size() != 0) {
    			for (int i = 0; i < statisticList.size(); i++) {
    				Statistic statistic = statisticList.get(i);
    				if (i != (statisticList.size() - 1)) {
    					TaxAmount = TaxAmount + statistic.getTaxAmount() + ",";
    				} else {
    					TaxAmount = TaxAmount + statistic.getTaxAmount();
    
    				}
    				if (i != (statisticList.size() - 1)) {
    					TotalAmount = TotalAmount + statistic.getTotalAmount() + ",";
    				} else {
    					TotalAmount = TotalAmount + statistic.getTotalAmount();
    
    				}
    			}
    			json.AddItem("TaxAmount", TaxAmount);
     			json.AddItem("TotalAmount", TotalAmount);
    
    			String jsons = "";
    			jsons = json.toString2();
    			return jsons;
    		} else {
    			return "{success:true,totalCount:0,data:[]}";
    		}
    
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 java页面后台数据交互(2)

接着上一篇的写，本篇记录的是从jsp页面传值到java后台的方法中，当后台获取到了页面上的值才可以进行新增和修改的相关操作。最为常见的就是表单提交，

末蓝、/ 2022年06月12日 04:36/ 0 赞/ 200 阅读

相关 java页面后台数据交互(1)

我们在开发的时候用的是jsp页面，后台采用的是SSM框架结构，前后台的数据交互频繁，不管是从数据库查询数据在jsp页面上显示，还是在页面填写信息保存到数据库中，都需

缺乏、安全感/ 2022年06月12日 04:29/ 0 赞/ 206 阅读

相关封装与后台交互且分页的函数（利用jquery）

这里我把请求封装成一个对象，使用post传递。其实使用get方式传递，在url上当作参数传递方式更为简单。思路相同，只是传递方式不同。 function connec

以你之姓@/ 2022年06月07日 14:15/ 0 赞/ 164 阅读

相关 vue.js与后台数据交互

第一步：引入js库： <script src="../js/common/vue.min.js"></script> <script src="../js/c

浅浅的花香味﹌/ 2022年06月01日 06:47/ 0 赞/ 264 阅读

相关 JQuery以及highchart与后台数据交互

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html debug=

川长思鸟来/ 2022年05月21日 01:55/ 0 赞/ 189 阅读

相关 JQuery以及highchart与后台数据交互

public String getDetailStatisticData(String city, String district, String ind

ゝ一纸荒年。/ 2022年05月21日 01:54/ 0 赞/ 228 阅读

相关 TP5中ajax与后台数据的交互

Ajax最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负

素颜马尾好姑娘i/ 2022年05月11日 00:54/ 0 赞/ 204 阅读

相关 MUI框架-09-MUI 与后台数据交互

MUI框架-09-MUI 与后台数据交互本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现我们大家都知道，想要数

ゝ一世哀愁。/ 2022年05月10日 06:58/ 0 赞/ 427 阅读

相关 Extjs 与后台交互方式

一、 var conn = new Ext.data.Connection(); conn.request(\{

﹏ヽ暗。殇╰゛Y/ 2022年03月26日 03:16/ 0 赞/ 284 阅读

相关 layui之数据表格--与后台交互获取数据

jsp或html <table></table> 1 js //用户列表 var tableIns = table.render(\{ elem: ‘\userL

小咪咪/ 2022年03月26日 02:16/ 0 赞/ 533 阅读