Highcharts:在HTML页面上应用highcharts实现与后台数据的交互

在我们项目过程中，常常许多时候需要用到图形化报表，以方便查看统计数据。而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的时候需要注意。总体来说还是比较简单的。