Highcharts获取json数据展现pie饼图

实际上很多时候图表展现的数据都是从服务器端获取，现在来做一个简单的异步获取json数据的例子。

　　服务器端用Servlet3.0实现，JSP页面通过jquery异步请求json数据提供给Highcharts展现。

　　1、用一个实体类封装要展现的信息

复制代码
package cn.luxh.app.entity;

/**
 * 浏览器市场份额
 * @author Luxh
 * 2012-11-3
 */
public class BrowserShare {
    
    //浏览器名称
    private String name;
    //份额
    private float share;
    
    public BrowserShare(String name, float share) {
        super();
        this.name = name;
        this.share = share;
    }
    
    public float getShare() {
        return share;
    }

    public void setShare(float share) {
        this.share = share;
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    
    
    

}
复制代码

　　2、处理请求的Servlet

复制代码
package cn.luxh.app.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import cn.luxh.app.entity.BrowserShare;

@WebServlet(name="dataServlet",value="/servlet/dataServlet")
public class DataServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json;charset=utf-8");
        
        List<BrowserShare> resultList = getData();
        Gson gson = new Gson();
        String result = gson.toJson(resultList);//转成json数据   
        
        PrintWriter out = response.getWriter();
        out.write(result);
        out.flush();
        out.close();
    }
    
    /**
     * 获取数据
     */
    private List<BrowserShare> getData() {
        
        List<BrowserShare> resultList = new ArrayList<BrowserShare>();
        resultList.add(new BrowserShare("Chrome",18.55F));
        resultList.add(new BrowserShare("Firefoc",19.99F));
        resultList.add(new BrowserShare("IE",54.13F));
        resultList.add(new BrowserShare("Oher",0.49F));
        resultList.add(new BrowserShare("Oprea",1.63F));
        resultList.add(new BrowserShare("Safari",5.21F));
        return resultList;
    }


}
复制代码

　　3、JSP页面

复制代码
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.2.min.js"></script>
        <script src="${pageContext.request.contextPath}/js/highcharts.js"></script>
        <script src="${pageContext.request.contextPath}/js/modules/exporting.js"></script> 
        <script type="text/javascript">
            $(function () {
                var chart;
                $(document).ready(function() {
                    chart = new Highcharts.Chart({
                        //常规图表选项设置
                        chart: {
                            renderTo: 'container',        //在哪个区域呈现，对应HTML中的一个元素ID
                            plotBackgroundColor: null,    //绘图区的背景颜色
                            plotBorderWidth: null,        //绘图区边框宽度
                            plotShadow: false            //绘图区是否显示阴影            
                        },
                        
                        //图表的主标题
                        title: {
                            text: '2012年10月份浏览器市场份额'
                        },
                        //当鼠标经过时的提示设置
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                            percentageDecimals: 1
                        },
                        //每种图表类型属性设置
                        plotOptions: {
                            //饼状图
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    color: '#000000',
                                    connectorColor: '#000000',
                                    formatter: function() {
                                        //Highcharts.numberFormat(this.percentage,2)格式化数字，保留2位精度
                                        return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';
                                    }
                                }
                            }
                        },
                           //图表要展现的数据
                        series: [{
                            type: 'pie',
                            name: '市场份额'
                        }]
                    });
                });
                
                //异步请求数据
                $.ajax({
                    type:"GET",
                    url:'${pageContext.request.contextPath}/servlet/dataServlet',//提供数据的Servlet
                    success:function(data){
                        //定义一个数组
                        browsers = [],
                        //迭代，把异步获取的数据放到数组中
                        $.each(data,function(i,d){
                            browsers.push([d.name,d.share]);
                        });
                        //设置数据
                        chart.series[0].setData(browsers);  
                    },
                    error:function(e){
                        alert(e);
                    }
                });
                
                
            });
        </script>
    </head>
    <body>
    
    <!--  图表的呈现区域，和常规图表选项设置中的renderTo: 'container'对应-->
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    </body>
</html>
复制代码

　　4、展现的结果

posted @ 2015-02-05 13:27  岁月淡忘了谁  阅读(7184)  评论(0)    收藏  举报