Java与Highcharts实例（五） -饼图数据传递(后台Java传递数
由于之前用的是柱状图，这次使用的是饼图，由于数据格式不一致，所以重新做了一个demo，直接上代码，由于之前有引用highchart的js，现在的页面代码就省略，有不清楚的可以看之前的demo案例，如果有不好的地方，请各位指点！
页面js代码效果（官方提供）
$(function() {
$('#container')
.highcharts(
{
chart : {
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false
},
title : {
text : '浏览器比列分析'
},
tooltip : {
pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
color : '#000000',
connectorColor : '#000000',
format : '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series : [{
type : 'pie',
name : 'Browser share',
data : [
[ 'Firefox', 45.0 ],
[ 'IE', 26.8 ],
[ 'Safari', 8.5 ],
[ 'Opera', 6.2 ],
[ 'Others', 0.7 ] ]
}
]
});
});
html代码
<div id="container" style="width: 100%; height: 400px;"></div>
改变后的js代码
$(function() {
var options = {
chart : {
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false
},
title : {
text : '比例统计分析'
},
tooltip : {
pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
color : '#000000',
connectorColor : '#000000',
format : '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series : [] //指定数据列,这里设为空，我们从后台拿数据
};
//从后台获取json格式的数据，第一个参数 url地址
$.getJSON("getData.do" , function(data) {
//插入Json数据
options.series = data;
//初始化chart
var chart = new Highcharts.Chart(options);
});
});
后台调用java代码，
在官方的demo可以看出，需要的数据里面是数组套数组，我还是使用对象的方式来封装数据，再通过gson解析，传入到前台
java代码
1.主数据封装对象
public class SysSmsSerie {
private String type;
private String name;
private List<Object[]> data;
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<Object[]> getData() {
return data;
}
public void setData(List<Object[]> data) {
this.data = data;
}
2.数组数据封装
public class SysSmsData {
private Integer smstype;
private String scale; //所占比例
public SysSmsData(Integer smstype, String scale) {
super();
this.smstype = smstype;
this.scale = scale;
}
public Integer getSmstype() {
return smstype;
}
public void setSmstype(Integer smstype) {
this.smstype = smstype;
}
public String getScale() {
return scale;
}
public void setScale(String scale) {
this.scale = scale;
}
3.调用方法
public String getData(HttpServletRequest request){
SysSmsSerie ss=new SysSmsSerie(); //创建主对象数据
ss.setType("pie");
ss.setName("比例统计分析");
//这里的list是通过后台调用方法获取的真实数据，在此略
if(list.size()>0){
List<Object[]> listObj=new ArrayList<Object[]>();
for(int i=0;i<list.size();i++){
SysSmsSerieData ssd=new SysSmsSerieData();
Object[] obj=new Object[2];
ssd.setType("类型1");
obj[0]=ssd.getType();
try {
//数据所占比例,这个地方现在使用的是测试数据（数据需要真实的获取）
ssd.setScale(50);
obj[1]=ssd.getScale();
} catch (Exception e) {
ssd.setScale(0);
}
listObj.add(obj);
}
ss.setData(listObj);
}
Gson gson = new Gson();
System.out.println(gson.toJson(ss));
return gson.toJson(ss);
}
还用一种方式就是使用二维数组的方式来组装数据（大家感兴趣的可以试一下），在通过gson来解析出来
上面就是一个完整的流程，如果有疑问，可以评论留言....