简单的说报表就是用表格、图表等格式来动态显示数据,可以用公式表示为:
“报表 = 多样的格式 + 动态的数据”。
首先我们先下载报表的一些模板供我们使用,自行上百度搜索Highcharts-6.1.4
1.解压:我们会发现是这样的
2.点击examples寻找我们需要的报表模板,找到之后,把jsp复制到自己项目
,复制完了之后需要值才能显示,这时我们就要考虑数据怎么加载进去,首先我们看复制过来jsp里面数据的格式
但是json输出的格式并不是这样的,所以我们要改格式
@RequestMapping(value = "selectCount")
public String selectCount(Model m){
String datas="";
try {
List<实体类> list = 调用查询方法;
StringBuilder sb = new StringBuilder("[");
for (Resource r : list) {
//把数据的格式都改为报表的格式,%s和%d相当于占位符的意思,如果是字符串需要使用单引号
sb.append(String.format("['%s',%d],", r.getTitle(), r.getDowncount()));
}
//输出最后一个逗号
sb.deleteCharAt(sb.length() - 1).append("]");
datas = sb.toString();
//把数据放进model
m.addAttribute("datas", datas);
//输出看是否正确
System.out.print(datas);
}catch (Exception e){
e.printStackTrace();
}
//返回你报表的页面
return "report_count";
}
先输出一下datas是否是我们需要的格式,改为格式后我们回到jsp
jsp里面的datas就是我们的数据了,之前我们把数据放进model里了,所以我们在页面上使用el表达式输出数据就好了
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'column'<!--图表的类型-->
},
title: {
text: 'csdn资源下载前十'<!--图表的标题-->
},
subtitle: {
text: ''<!--图表副的标题-->
},
xAxis: {
type: 'category',
labels: {
rotation: -45,<!--字体度数->
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: '下载量 (次)'<!--右侧的提示-->
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'csdn资源下载前十: <b>{point.y:.0f} 次</b>'<!--鼠标移上去的提示-->
},
series: [{
name: '次数',
data:${datas},
dataLabels: {<!--数据上面的文字-->
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.0f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
</script>