[总结]SSH+Highcharts动态图表

在13年写了两篇帖子“SSH+Highcharts 异步加载图表”，到现在有很多人在QQ加我问我取值，加载数据的问题，然后我翻了翻之前的博客，发现确实有很多漏洞，当时也是刚开始接触Highchart，有很多问题没说清楚。

今天重开一贴，希望能理清楚，大家一看就知道怎么用。

 

1、首先下载highchart，并引入js：

<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/highchart/highcharts.js"></script>

 

2、构造图表容器：

 

<div id="adschartContainer"   style="min-width: 400px; height: 500px; margin: 0 auto">
</div>

 

 

3、在javascript中初始化图表

 

<script>
$(function() {
	 var adsChart;
	 adsChart = new Highcharts.Chart({
	 	chart : {
			renderTo : 'adschartContainer',
			defaultSeriesType : 'spline',
		},
		title : {
			text : '广告用户分析曲线图',
			x : -20
		//center
		},
		xAxis : {
			categories : [ ]
		},
		yAxis : {
			title : {
				text : '总数量'
			},
			plotLines : [ {
				value : 0,
				width : 1,
				color : '#808080'
			} ]
		},
		tooltip : {
			formatter : function() { //formatter格式化函数
				return '<b>' + this.series.name + '</b><br/>' + this.x
						+ ': ' + this.y;
			}
		},
		legend : {
			layout : 'vertical',
			align : 'right',
			verticalAlign : 'top',
			x : 0,
			y : 100,
			borderWidth : 0
		},
		series : [{name:'新用户'},{name:'老用户'},{name:'下载量'},{name:'安装量'},{name:'没广告'}]
	 });
});
</script>

 这样我们就初始化好了一个空的图表容器，这里横坐标、纵坐标都是空的。横坐标：categories : [ ];纵坐标：series : [{name:'新用户'},{name:'老用户'},{name:'下载量'},{name:'安装量'},{name:'没广告'}]

 

 

这里我们生成了四条曲线，series中每一个对象对应一条曲线，series要求的格式如下：

series : [{name:'新用户'，data:[]},{name:'老用户',data[]}]

即每一条曲线需要一个data数组和一个名字，动态赋值我们只需要使用调用setdata方法即可。

（如果想要动态返回曲线名可以参考之前的博客SSH+Highcharts 生成动态图表 ——在思考中解决问题。）

 

 

 

4、动态构建曲线数值

在初始化容器完成以后我们可以发送请求到后台（ajax），下面这段代码直接接上面：

 

 

//给图表加载值
var url = '${pageContext.request.contextPath}/chartAction!getAdsChart.action';
$.post(url, function(response) {
     newList = response.newList;
     oldList = response.oldList;
     downList = response.downList;
     installList = response.installList;
     timList = response.timList;

     adsChart.series[0].setData(newList);
     adsChart.series[1].setData(oldList);  
     adsChart.series[2].setData(downList);
     adsChart.series[3].setData(installList);
     adsChart.xAxis[0].setCategories(timList);
}, "json");

 这样后台给我们返回了5个对象数字（4条曲线，1个横坐标数组）

 

 

{"downList":[24923,38372,31822,27931,26572,25253,24752,25002,19527,23401,26602,25912,37069,83962,46483,24686,5229,5506,41448,36060],"installList":[5988,5806,6026,6428,6312,6196,6203,6515,6059,6027,6372,6757,6485,9242,8385,7026,4826,4231,7437,8262],"loseList":[646,783,857,883,936,1028,1013,1106,1087,1076,1075,1144,0,106,386,552,609,621,672,739],"newList":[6159,5590,6051,6102,6139,5931,5501,6254,6142,6060,6277,6381,5670,5902,5603,5557,5591,6041,5844,5768],"oldList":[47817,47339,48629,49456,49324,49312,48391,50188,50842,50944,51715,52555,51431,52626,52045,51511,51440,52628,52928,52985],"timList":["07-01","07-02","07-03",...]}

 

到这一步应该就能生成图表了。

至于后台数据无非就是将其查询出来并放到对象里面返回给前端即可。

后台处理数据对象类：

public class HighChart {
	private List<Long> newList=new ArrayList<Long>();
	private List<Long> oldList=new ArrayList<Long>();
	private List<Long> downList = new ArrayList<Long>();
	private List<Long> installList = new ArrayList<Long>();
	private List<Long> loseList = new ArrayList<Long>();
	private List<String> timList = new ArrayList<String>();
        getter and setter...
}

 

结果如下：

 

ps:话说我现在还是比较喜欢Echarts啊!!!!

评论

2 楼 白糖_ 2014-07-23  

Echarts不错，支持国产，支持百度

1 楼 单一色调 2014-07-23  

欢迎拍砖！