highcharts绘制统计图的应用
第一步：
在jsp中引入插件">
第二步:
用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
MapgetBaseDetailDataChart(HttpServletRequest request)
throws ParseException {
Map resultMap = new HashMap();
resultMap = getData();
return resultMap;
}
private Map getData(){
// 用来存储返回结果的Map
Map resultMap = new HashMap();
List analyticses = Text.getList();
// 把analyticses按照频道id分组
Map map = new HashMap();
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 groupList = newArrayList();
groupList.add(analytics);
map.put(channleName, groupList);
}// end if-else
}// end for
// 存放曲线的所需的数据
List list = new ArrayList();
// 把每一个组的list里面的Analytics对象的duration放入data
for (Iterator 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 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 channels = this.channelServcie.listChannel();
// 横坐标所需的数据
List channelNames = new ArrayList();
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 getList(){
List analyticses = new ArrayList();
//第一组数据,对应统计图的一条线
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;
一个很好的学习Highcharts插件的网站，类似于w3c，可以自己对例子进行编辑，http://api.highcharts.com/highcharts