JQuery以及highchart与后台数据交互

最新推荐文章于 2020-12-13 09:29:50 发布

zhaoyue007101

最新推荐文章于 2020-12-13 09:29:50 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： jquery function string null layout json

本文链接：https://blog.csdn.net/zhaoyue007101/article/details/8083363

版权

js 专栏收录该内容

8 篇文章 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" />
<!--  meta http-equiv="X-UA-Compatible" content="chrome=1" -->
<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>
<!-- Highslide code -->
<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:[]}";
		}

	}

zhaoyue007101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery以及highchart与后台数据交互

Highcharts Demo - Basic line jQuery.noConflict();<script type="text/javascript" src="/highslide/highslide.config.js" charset="utf-8"> var example = 'line-basic', theme = 'skies';<link
复制链接

扫一扫