您的位置：首页 > 其它

SSH+Highcharts 生成动态图表 ——在思考中解决问题

2013-09-06 22:49 711 查看

SSH+Highcharts 生成动态图表 ——在思考中解决问题

博客分类：

JAVA后台

Highcharts js图表Highcharts
jsonHighcharts动态生成数据

最近一个项目中需要用到图表分析，能直观看出一个月内访问量的变化曲线。

问题1：js图表插件那么多，到底选哪一个呢？

通过在网上搜索，选中了Highcharts。

那么第一步肯定是去官网下载，查看demo。

Html代码

http://www.highcharts.com/
选中曲线图的示例，查看Highcharts的加载方式：

Html代码

public class Highcharts {

private String name;

private List data = new ArrayList();

//get and set

}

这样在Service层就是一个解析查询List的过程了：

Java代码

public JSONObject getPlusCharts() {

String hql = "select sum(plustimei),sum(nopluswithdis),substring(time,6,10) from AnalyseResult group by time";

List chartList = analyseResultDao.find(hql);

List<Highcharts> dataList = new ArrayList<Highcharts>();

JSONObject jsonData = new JSONObject();

Highcharts highchart1 = new Highcharts();

Highcharts highchart2 = new Highcharts();

List<String> xdataList = new ArrayList<String>();

List<Long> imeilist = new ArrayList<Long>();//imei

List<Long> pluslist = new ArrayList<Long>();//noplus

for(int i =0;i<chartList.size();i++){

Object[] object = (Object[]) chartList.get(i);

imeilist.add((Long) object[0]);

pluslist.add((Long) object[1]);

xdataList.add(object[2].toString());

}

<span style="color: #ff0000;">highchart1.setName("imei去重分析");

highchart1.setData(imeilist);

highchart2.setName("没有带插件分析");

highchart2.setData(pluslist);</span>

dataList.add(highchart1);

dataList.add(highchart2);

jsonData.put("data", dataList);

jsonData.put("listXdata", xdataList);

return jsonData;

}

红色部分表示有几条曲线，就应该有几个类来封装。

这里用到了fastjson，一款json解析插件。

Action层接收以后传值给前台就行了：

Java代码

public void getPlusCharts(){

JSONObject jsonObject = analyseResultService.getPlusCharts();

super.writeJson(jsonObject);//传入前台

}

项目进行到这里，我们打开火狐调试工具Firebug，请求该Action，可以看到后台生成的数据格式如下：

Java代码

{"listYdata":[{"data":[1549,2106,3372],"name":"imei去重分析"},{"data":[364,841,1565],"name":"没有带插件分析"}],"listXdata":["04-16","04-17","04-18"]}

问题3：后台生成了数据，那么在前台如何处理呢？

我们可以在页面加载的时候发送一段ajax到后台，生成数据格式，如果返回了数据再来构造曲线图：

Js代码

大功告成！

经常有网友问我需要用到哪些包，我将所用到的包放到网盘，有需要的就去下载吧！

Html代码

http://pan.baidu.com/share/link?shareid=4042236307&uk=3173707519

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航