highcharts动态加载json数据

最新推荐文章于 2021-03-06 02:55:36 发布

阿晖666

最新推荐文章于 2021-03-06 02:55:36 发布

阅读量3.8k

点赞数

分类专栏： web前端 Java设计

本文链接：https://blog.csdn.net/lixinhui199/article/details/50724238

版权

Java设计同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

web前端

3 篇文章 0 订阅

订阅专栏

首先创建一个container

<body>

	<script src="js/highcharts.js"></script>
	<script src="js/exporting.js"></script>
	<div id="container"
		style="min-width:800px; height: 400px; margin: 0 auto"></div>



</body>

js函数

$(function() {
	var x = [];//X轴
	var y = [];//Y轴
	var xtext = [];//X轴TEXT
	var color = [ "gray", "pink", "blue", "yellow", "green", "#fff" ];
	$.ajax({
		type : 'get',
		url : "dept/getChartsJson.shtml",//请求数据的地址
		success : function(data) {
			//var json = eval("(" + data + ")");
			var json = eval("(" + data + ")");

			for ( var key in json.list) {
				json.list[key].y = json.list[key].count; //给Y轴赋值
				xtext = json.list[key].name;//给X轴TEXT赋值
				json.list[key].color = color[key];
			}
			chart.series[0].setData(json.list);//数据填充到highcharts上面
		},
		error : function(e) {
		}
	});

	var chart = new Highcharts.Chart({
		chart : {
			renderTo : 'container',
			type : 'column'
		},
		title : {
			text : '部门统计柱状图'
		},
		subtitle : {
			text : ''
		},
		xAxis : {

			categories : xtext
		},
		yAxis : {
			min : 0,
			title : {
				text : '人数 (个)'
			},
			labels : {//格式化纵坐标的显示风格  
				formatter : function() {
					return this.value;
				}
			},
			opposite : false
		//反转  
		},
		legend : {//是否显示底注  
			enabled : true
		},
		tooltip : {
			shared : true,
			useHTML : true
		},
		plotOptions : {
			series : {
				cursor : 'pointer',
				events : {
					click : function(e) {
						var value=e.point.id;
						location.href ="user/showTable.shtml?id=" +value;
					}
				}
			},
			column : {
				pointPadding : 0.2,
				borderWidth : 0
			}
		},
		series : [ {
			name : "人数"
		} ]

	});

});

后台action

@RequestMapping(value="/getChartsJson" ,produces = "text/html;charset=UTF-8")
	@ResponseBody
	public String getJson() {
		/*
		JSONObject params = new JSONObject();
		params.put("name", deptService.getDeptname());
		params.put("count", userService.getDeptCountList());
		*/
		List<Integer> listcount=userService.getDeptCountList();
		List<String> listname=deptService.getDeptname();
		List<Integer> listdeptid=deptService.getDeptid();
		
		JSONArray jsonarray=new JSONArray();
		for(int i=0;i<listcount.size();i++){
			JSONObject params = new JSONObject();
			params.put("name", listname.get(i));
			params.put("count", listcount.get(i) );
			params.put("id", listdeptid.get(i) );
			
			jsonarray.add(i,params );
		}
		JSONObject json = new JSONObject();
		json.put("list", jsonarray);
		String s=json.toString();
		return s;

	}