在我们项目过程中,常常许多时候需要用到图形化报表,以方便查看统计数据。而highcharts则是我们做图形报表的不二选择,支持各种图表:如曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等。
这篇博客主要是介绍怎么将后台的数据展示在html页面上,下面就来进行实战操作:
操作之前先把完成的报表亮出来,这里主要是一个折线图:
先需要引入highcharts的核心文件:
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="//img.hcharts.cn/highcharts/modules/export-data.js"> </script>
第一个是jquery的核心文件,第二个是highcharts的核心文件,三四个是highcharts官方提供的报表导出工具,可以直接导出如png,pdf,Excel之类的文件:
可以说功能是十分的强大,如需要了解更多这里是highcharts的官网
下面就是折线图的一个实例:
<script type="text/javascript">
$(function () {
$.post('bar.action', function (result) {
$('#container').highcharts({
//标题
title: {
text: '每日检测人数变化图',
x: -20 //center
},
subtitle: {
text: 'hello©',
x: -20
},
//X轴数据
xAxis: {
categories: result.yy
},
//Y轴数据
yAxis: {
//Y轴标题
title: {
text: '每日检测人数变化图'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
//计数单位
tooltip: {
valueSuffix: '人'
},
//报表图的类型
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
//单位形容 data,回调的json数据
series: [{
name: '人数',
data:result.kk
}]
});
}, 'json')
});
</script>
以及显示报表的div:
<div id="container" style="min-width:700px;height:400px"></div>
还有后台数据的controller层:
//springMvc返回json数据
@ResponseBody
@RequestMapping("bar")
public Map<String,Object> getJson(){
Map<String,Object> map=new HashMap<>();
int[] values = {77,0,0,0,0,0,0,0,0,5,9,15,21,31,25,12,36,54,17,25,54,12,12,34,22,23,26,18,12,32,12};
String[] date={"1日", "2日", "3日", "4日", "5日", "6日","7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日","17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日","27日", "28日", "29日", "30日", "31日"
};
map.put("kk",values);
map.put("yy",date);
return map;
}
这是传输的json数据:
这样后台传输数据显示折线图的报表就完成了,需要注意的有几点,第一是要将数据转成json格式返回到页面,第二就是highcharts的categories一般都是需要String类型的数据,打他需要的一般为int数据,转json的时候需要注意。总体来说还是比较简单的。