文章标题

Highcharts与json结合完美运用

项目位置

框架采用的时
Struts1跟Spring结合
数据库的mysql
jdk 1.7
tomcat6
数据库

1.柱状图页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>折线图</title>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../highchart/highcharts.js"></script>
<script type="text/javascript" src="../highchart/highcharts-3d.js"></script>
<script type="text/javascript" src="../highchart/jdate.min.js"></script>
<script type="text/javascript" src="../highchart/dark-unica.js"></script>
<script type="text/javascript" src="../highchart/exporting.js"></script>
</head>
<script type="text/javascript">

$(function (){
    getdate();
});
function getdate() {  
   //从后台获取json格式的数据  
   $.ajax({
           type: "POST",
           url: "/oa/UserAction.do?method=showDetail",
           dataType:"JSON",
            success: function(data){
                //alert(data);
                var data = JSON.parse(data);
                browsers = [];
                var datatemp;
                for(var i=0;i<data.length;i++){
                    var username = data[i].username;
                    //alert(username);
                    var month = data[i].month;
                    var febuery = data[i].febuery;
                    var march = data[i].march;
                    //var april = data[i].april;
                    //var may = data[i].may;
                    //alert(browsers.push([username,month,febuery,march]));
                    datatemp += "{name: '"+ data[i].username +"',data:["+ month +","+ febuery +","+ march +" ]}" + ",";
                }
                //去除最后一个字符
                datatemp=datatemp.substring(9,datatemp.length);
                //alert(datatemp.length);
                datatemp=datatemp.substring(0,datatemp.length-1);
                //alert(datatemp);
                getAllchart(datatemp);
           }
           });

};

function getAllchart(datatemp){

    // 设置打野下载汉化
    Highcharts.setOptions({
        lang: {
             printChart:"打印图表",
              downloadJPEG: "下载JPEG 图片" , 
              downloadPDF: "下载PDF文档"  ,
              downloadPNG: "下载PNG 图片"  ,
              downloadSVG: "下载SVG 矢量图" , 
              exportButtonTitle: "导出图片" ,
              months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',  'Juillet', 'Ao?t', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
              weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
        }
    });

       $('#container').highcharts({ 
           chart : {  
               type : 'column' , //指定图表的类型,默认是折线图(line)  
               renderTo: 'container'  
           },  
           title : {  
               text : '中关村电脑销售表统计' //指定图表标题  
           }, 
           subtitle:{
                 text: '2017每月份研发产品统计'  
               },
           xAxis : {  
               categories : [  '一月份', '二月份','三月份' ] //指定x轴分组  
           },  
           yAxis : {  
               title : {  
                   text : '研发量(万)'   // 指定y轴的标题  
               }  
           },
           exporting:
           {
                enabled:true,//默认为可用,当设置为false时,图表的打印及导出功能失效
                buttons:{    //配置按钮选项
                    /* printButton:{    //配置打印按钮
                        width:50,
                        symbolSize:20,
                        borderWidth:2,
                        borderRadius:0,
                        hoverBorderColor:'red',
                        height:30,
                        symbolX:25,
                        symbolY:15,
                        x:-200,
                        y:20
                    },
                        exportButton:{    //配置导出按钮
                            width:50,
                            symbolSize:20,
                            borderWidth:2,
                            borderRadius:0,
                            hoverBorderColor:'red',
                            height:30,
                            symbolX:25,
                            symbolY:15,
                            x:-150,
                            y:20
                        }, */
                   },
                           filename:'统计表',//导出的文件名
                           type:'image/png',//导出的文件类型
                           width:800    //导出的文件宽度
             },
           series : eval("[" + datatemp + "]")
           //series : [ datatemp ]
                });
       $(function(){
       $('#button').click(function () {
             //getdate();
            var chart = $('#container').highcharts();
            chart.exportChart();
        });
       });
    };

   </script>
<body>
<div id="container" style="min-width:400px;height:500px"></div>
<button id="button">导出图表</button>
</body>
</html>

后台
DAO层

    /**
     * 2017-02-24
     * 柱状图
     */
    @SuppressWarnings("unchecked")
    public List<OaUser> getall() throws Exception{
        List<OaUser> lists = new ArrayList<OaUser>();
        String sql = "select username,month,febuery,march from OaUser";
        List<Object[]> list = getHibernateTemplate().find(sql);
        Iterator<Object[]> obj = list.iterator();
        while(obj.hasNext()){
            Object[] ob =obj.next();
            OaUser user = new OaUser();
            user.setUsername((String)(ob[0]==null?"":ob[0]));
            user.setMonth((Double) (ob[1]==null?"":ob[1]));
            user.setFebuery((Double) (ob[2]==null?"":ob[2]));
            user.setMarch((Double) (ob[3]==null?"":ob[3]));
            //user.setApril((Double) (ob[4]==null?"" :ob[4]));
            //user.setMay((Double) (ob[5]==null?"" :ob[5]));
            lists.add(user);

Service层
service层

Action层

/**
     * 显示详细信息柱状图
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    public ActionForward showDetail(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json;charset=utf-8");
        //UserForm forms = (UserForm) form;
        List<OaUser> user = null;
        //List<OaUser> user = new ArrayList<OaUser>();
        user = userService.getall();
        Gson gson = new Gson();
        String str = gson.toJson(user);
        PrintWriter writer = response.getWriter();
        writer.print(str);
        writer.flush();
        writer.close();
        System.out.println(str);

        return mapping.findForward("view");
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值