Highcharts获取json数据展现

  实际上很多时候图表展现的数据都是从服务器端获取,现在来做一个简单的异步获取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、展现的结果

Highcharts获取json数据展现

 

 

 

 

 

 

 

你可能感兴趣的:(Highcharts)