Highcharts 图文报表--第一步

Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表.HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器好吧现在来开始我们的第一个Highcharts吧

这里首先得下载 Highcharts 3.0.10.zip压缩包解压后导入项目然后引入js文件到页面它的下载路径：http://www.hcharts.cn/

1 <script type="text/javascript" src="<%=path %>/Highcharts_jslib/jquery-1.8.2.js"></script>
2 <script type="text/javascript" src="<%=path %>/Highcharts_jslib/highcharts.js"></script>

创建demo.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'demo.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=path %>/Highcharts_jslib/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=path %>/Highcharts_jslib/highcharts.js"></script>

<script type="text/javascript">

    $(document).ready(function(){
        var options = {
                chart:{
                  renderTo:'container', 
                  defaultSeriesType:'spline',
                  margin:[80,100,60,100]              
                },    
                title:{
                    text:'图表测试',
                    style:{margin:'10px 0 0 0'}
                },
                subtitle:{
                    text:'Month Finance',
                    style:{margin:'0 0 0 0'}
                },
                xAxis:{
                    categories:['2013.12','2014.01','2014.02','2014.03','2014.04','2014.05','2014.06','2014.07']
                },
                yAxis:{            
                    title:{
                        text:'y轴数据'
                    }
                },
                tooltip:{
                    formatter:function(){
                        return '<b>'+this.series.name+'</b><br/>'+
                        this.x+':'+this.y+'Ԫ';
                    }
                },
                legend:{
                    layout:'vertical',
                    align:'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    backgroundColor:'#FFFFFF'
                },
                series:[]
        };
/**

        options.series.push(
            {
                name:'张三',
                data:[11000,200000,3000,50000,88888,10000,20000,30000]
            },{
                name:'李四',
                data:[58000,20000,30000,80000,8888,20000,40000,60000]
            },{
                name:'王五',
                data:[20000,120000,350000,180000,28888,20000,30000,60000]            
            },{
                name:'赵六',
                data:[38000,20000,60000,90000,50000,30000,50000,80000]
            }
        );
**/


        $.ajax({
            
            url:'<%=path%>/base.action?ac=demoChart',
            success:function(data){
                //var d = eval("("+data+")");
                
                var d = jQuery.parseJSON(data);
                var dd = eval(d.obj);
                for(i=0;i<dd.length;i++){
                    
                    console.info(dd[i]);
                    options.series.push(dd[i]);
                }
                var chart = new Highcharts.Chart(options);
            }
        });

    });
</script>
</head>
<body>
<div title="My Documents" style="padding:10px;" >
    <div id="container" style="width: 800px;height: 400px;margin: 0 auto auto 0;"></div>    
</div>
</body>
</html>

后台Servlet返回数据

 1     public void doPost(HttpServletRequest request, HttpServletResponse response)
 2             throws ServletException, IOException {
 3         
 4         String action = request.getParameter("ac");
 5         Json j = new Json();
 6         String str = "["+
 7                 "{name:'张三',data:[11000,200000,3000,50000,88888,10000,20000,30000]},"+
 8                 "{name:'李四',data:[58000,20000,30000,80000,8888,20000,40000,60000]},"+
 9                 "{name:'王五',data:[20000,120000,350000,180000,28888,20000,30000,60000]},"+
10                 "{name:'赵六',data:[38000,20000,60000,90000,50000,30000,50000,80000]}"+"]";
11         if(action==null){
12             
13             j.setMessage("系统错误");
14         }else{
15             try {
16                 j.setSuccess(true);
17                 j.setObj(str);
18             } catch (Exception e) {
19                 j.setMessage(e.getMessage());
20             }
21         }
22         
23         this.writeJson(j, request, response);
24 
25     }

 1     public void writeJson(Object object,HttpServletRequest request, HttpServletResponse response) {
 2         try {
 3             String json = JSON.toJSONStringWithDateFormat(object, "yyyy-MM-dd HH:mm:ss");
 4             response.setContentType("text/html;charset=utf-8");
 5             response.getWriter().write(json);
 6             response.getWriter().flush();
 7             response.getWriter().close();
 8         } catch (IOException e) {
 9             e.printStackTrace();
10         }
11     }

public class Json implements Serializable{
    

    private static final long serialVersionUID = -1886023828605830039L;
    private boolean success = false;
    private String  message = "";
    private Object  obj     = null;
    public boolean isSuccess() {
        return success;
    }
    public void setSuccess(boolean success) {
        this.success = success;
    }
    public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
    public Object getObj() {
        return obj;
    }
    public void setObj(Object obj) {
        this.obj = obj;
    }
}

好了输入localhost:8080/Highcharts/demo.jsp后就会看到以下效果了

posted on 2014-04-15 09:39 moyun- 阅读(486) 评论(0) 收藏举报

刷新页面返回顶部

MOYUN(/Java/SQL/Linux/DevOps/运维/架构/管理/敏捷/开发)

公告