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