highcharts.js绘制统计图的应用,与后台异步交互
第一步：
在jsp中引入插件<script src="<c:urlvalue="/asset/admin/js/highcharts.js"/>"></script>
第二步:
用div来画统计图<div id="line" style="width: 750px; height: 400px;margin: 0 auto"> </div>
第三步:
把div与第一步的插件进行绑定代码如下
- $('#line').highcharts({
- xAxis: { //横轴
- categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
- title: {text: '横轴名称'}
- },
- yAxis: {//纵轴
- title: {
- text: '纵轴名称'
- }
- },
- series: [{//画图所依据的数据
- data: [1, 3, 5, 2, 3, 9, 6, 7, 3, 5, 4, 3]
- }]
- });
- });
几点说明：
1) 如果不指定统计图类型的话，默认的是折线统计图
2) Series是统计所需要的数据，在本文中需要从后台获取json数据
3) 上面的series只有一条数据{ data: [1, 3, 5, 2, 3, 9, 6, 7, 3, 5, 4, 3]}，在图形上的表现是只有一条线如下图
可以发现，为了清楚的知道这条线是指的什么，可以为这条线指定一个名字
上面的一条数据可以加一个name属性
{ name:”折线名”,data: [1, 3, 5, 2, 3, 9, 6, 7, 3, 5, 4, 3]}如图
当然如果需要多条线，那么就需要提供多条数据就可以了
比如：
series:
[{name:”第一条线”,data: [1, 3, 5, 2, 3, 9, 6,7, 3, 5, 4, 3] },
{name:”第二条线”,data: [1, 13, 8, 9, 3, 19, 1, 8, 9, 15, 14, 4] }
]
第四部：异步请求数据获取数据
通过上面的分析，可以发现如果需要对数据绘制统计图，只需要从后台传来一个json数据串就行了，在这里用ajax异步请求数据
异步请求代码如下：
var drawChart = function(sourceUrl) { $.ajax({ "type" : "post", "url" : sourceUrl, "success" : function(result) { var data = result.data;//获取数据 var categories = result.categories;//categories类别 var datas = []; //把data数据处理成一条条json的格式的数据，付给series for ( var i = 0; i < data.length; i++) { // 构建折线图数据 datas.push({ name : data[i].name,//线条的名字 data : data[i].data//线条走势所需要的数据 }); }//end for if (datas.length > 0) { var stepSize= Math.floor(categories.length/10); drawLine(datas, categories);//把所需的数据传给highcharts $("#line").css('display','block'); $("#line").show(); } }, "dataType" : "json" }); }; // var chart; var drawLine = function(data, categoriess) { chart = new Highcharts.Chart({ chart : { renderTo : 'line', defaultSeriesType : 'line' }, title : {text : '频道观看时长统计图'}, xAxis : { categories :categoriess, title:{ text:"时间"} }, yAxis : {title : {text : '观看时长'} }, legend: { layout: 'vertical', backgroundColor: '#FFFFFF', align: 'left', verticalAlign: 'top', x: 50, y: 20, floating: true, shadow: true }, series :data }); };
后台得到数据的方法如下
/** * 数据统计图 * @throws ParseException */ @RequestMapping(value = "/getBaseDataChart.json", method = RequestMethod.POST) public@ResponseBody Map<String, Object>getBaseDetailDataChart(HttpServletRequest request) throws ParseException { Map<String, Object> resultMap = new HashMap<String,Object>(); resultMap = getData(); return resultMap; } private Map<String, Object> getData(){ // 用来存储返回结果的Map Map<String, Object> resultMap = new HashMap<String,Object>(); List<Analytics> analyticses = Text.getList(); // 把analyticses按照频道id分组 Map<String, List> map = new HashMap<String,List>(); for (int i = 0; i < analyticses.size(); i++) { Analytics analytics = (Analytics) analyticses.get(i); String channleName = analytics.getChannelName(); if (map.containsKey(channleName)) { map.get(channleName).add(analytics); } else { List<Analytics> groupList = newArrayList<Analytics>(); groupList.add(analytics); map.put(channleName, groupList); }// end if-else }// end for // 存放曲线的所需的数据 List<ChartEntity> list = new ArrayList<ChartEntity>(); // 把每一个组的list里面的Analytics对象的duration放入data for (Iterator<String> iterator = map.keySet().iterator(); iterator .hasNext();) {// 遍历每一个key String channelName = iterator.next();//频道名称 ChartEntity ent = new ChartEntity(); ent.setName(channelName); long[] array = newlong[map.get(channelName).size()];//画图所需的数据，对应着series的data int i = 0; for (Iterator<Analytics> iterator2 = map.get(channelName) .iterator(); iterator2.hasNext();) {// 遍历每一个key对应的值也就是List Analytics ana = iterator2.next(); array[i] = ana.getDuration(); i++; }//end for ent.setData(array); list.add(ent); }//end for List<Channel> channels = this.channelServcie.listChannel(); // 横坐标所需的数据 List<String> channelNames = new ArrayList<String>(); for (Channel channel : channels) { String name = channel.getName(); channelNames.add(name); }// end for resultMap.put("categories", channelNames);// 横坐标的名字,应该改为时间最好，后续要完善 resultMap.put("data", list);// 数据 return resultMap; }
注意：
1） 类ChartEntity里面保存了两条字段 private String name,private Long data[]，并提供了两个get/set方法，
name对应着Highcharts.Chart里series的name和data
2） Text.getList()是提供的一些测试数据，也可以从相关的数据库中获取代码如下
public static List<Analytics> getList(){ List<Analytics> analyticses = new ArrayList<Analytics>(); //第一组数据,对应统计图的一条线 for(int i=0;i<9;i++){ Analytics a= new Analytics(); a.setChannelName("A"); a.setDuration(100+i*10); analyticses.add(a); } //第二组数据，对应统计图的一条线 for(int i=0;i<8;i++){ Analytics a= new Analytics(); a.setChannelName("B"); a.setDuration(60+i*10); analyticses.add(a); } //第三组数据，对应统计图的一条线 for(int i=0;i<15;i++){ Analytics a= new Analytics(); a.setChannelName("C"); a.setDuration(200+i*10); analyticses.add(a); } return analyticses;
