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();
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 resultList = getData();
Gson gson = new Gson();
String result = gson.toJson(resultList);//转成json数据

PrintWriter out = response.getWriter();
outwrite(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页面
<%@ page language="java" pageEncoding="UTF-8"%>

Highcharts Example

$(function () {
</p><p style='height:0px;padding:0;overflow:hidden'>11、 var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
//常规图表选项设置
chart: {
renderTo: 'container', //在哪个区域呈现，对应HTML中的一个元素ID
</p><p style='height:0px;padding:0;overflow:hidden'>12、 plotBackgroundColor: null, //绘图区的背景颜色
plotBorderWidth: null, //绘图区边框宽度
plotShadow: false //绘图区是否显示阴影
},

//图表的主标题
</p><p style='height:0px;padding:0;overflow:hidden'>13、 title: {
text: '2012年10月份浏览器市场份额'
},
//当鼠标经过时的提示设置
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percen</p><p style='height:0px;padding:0;overflow:hidden'>14、tageDecimals: 1
},
//每种图表类型属性设置
plotOptions: {
//饼状图
pie: {
allowPointSelect: true,
cursor: 'pointer'</p><p style='height:0px;padding:0;overflow:hidden'>15、
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
</p><p style='height:0px;padding:0;overflow:hidden'>16、 //Highcharts.numberFormat(this.percentage,2)格式化数字，保留2位精度
return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';
}
}
</p><p style='height:0px;padding:0;overflow:hidden'>17、 }
},
//图表要展现的数据
series: [{
type: 'pie',
name: '市场份额'
}]
});
});

</p><p style='height:0px;padding:0;overflow:hidden'>18、 //异步请求数据
$.ajax({
type:"GET",
url:'${pageContext.request.contextPath}/servlet/dataServlet',//提供数据的Servlet
success:function(data){
//定义一个数组
browsers = [],
</p><p style='height:0px;padding:0;overflow:hidden'>19、 //迭代，把异步获取的数据放到数组中
$.each(data,function(i,d){
browsers.push([d.name,d.share]);
});
//设置数据
chart.series[0].setData(browsers);
},
</p><p style='height:0px;padding:0;overflow:hidden'>20、
error:function(e){
alert(e);
}
});

});