使用idea制作报表

简单的说报表就是用表格、图表等格式来动态显示数据,可以用公式表示为:
“报表 = 多样的格式 + 动态的数据”。
首先我们先下载报表的一些模板供我们使用,自行上百度搜索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>

猜你喜欢

转载自blog.csdn.net/weixin_42617600/article/details/85333392
今日推荐