Highcharts获取json数据展现.docx

实际上很多时候图表展现的数据都是从服务器端获取，现在来做一个简单的异步获取json数据的例子。服务器端用Servlet3.0实现，JSP页面通过jquery异步请求json数据提供给Highcharts展现。1、用一个实体类封装要展现的信息package cn.luxh.app.entity;public class BrowserShare /浏览器名称 private String name; /份额 private float share; public BrowserShare(String name, float share) super(); = 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) = name; 2、处理请求的Servletpackage 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 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 getData() List resultList = new ArrayList(); 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页面 Highcharts Example $(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: : point.percentage%, percentageDecimals: 1 , /每种图表类型属性设置 plotOptions: /饼状图 pie: allowPointSelect: true, cursor: pointer, dataLabels: enabled: true, color: #000000, connectorColor: #000000, formatter: function() /Highcharts.numberFormat(this.percentage,2)格式化数字，保留2位精度 return + +: +Highcharts.numberFormat(this.percentage,2) + %; , /图表要展现的数据 series: type: pie, name: 市场份额 ); ); /异步请求数据 $.ajax( type:GET, url:$pageContext.request.contextPath/servlet/dataServlet,/提供数据的Servlet success:function(data) /定义一个数组 browsers = , /迭代，把异步获取的数据放到数组中