簡單的說報表就是用表格、圖表等格式來動態顯示資料，可以用公式表示為：
“報表 = 多樣的格式 + 動態的資料”。
首先我們先下載報表的一些模板供我們使用,自行上百度搜索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>