ajax json实现饼状图,jqplot AJAX JSON对象创建饼状图

上篇文章为柱状图,这篇为饼状,主要是渲染的方式和构建JSON对象不同

WEB端:

/*

饼状图函数

*/

/*

返回JSON对象必需类似于[[['name1',100],['name2',100]]],jqplot 自动换算成 name1:50%,name2:50%

*/

function createPieCharts(){

var ajaxDataRenderer = function (url,plot,options) {

var ret = null;

$.ajax({

async: false,

url: url,

dataType: "json",

success: function (data) {

ret =data;

}

});

return ret;

};

var jsonurl = "/test/servlet/PieServlet";

var options = {

seriesDefaults: {

//饼状图渲染

renderer: jQuery.jqplot.PieRenderer,

rendererOptions: {

showDataLabels: true

}

},

title : '饼状图数据显示',

legend: { show:true,location: 'e'},//显示位置

dataRenderer: ajaxDataRenderer,

dataRendererOptions: { unusedOptionalUrl: jsonurl}

}

var plot1 = jQuery.jqplot ('chart2',jsonurl,options);

}

服务端:

response.setCharacterEncoding("UTF-8");

response.setContentType("text/html");

JSONArray list = new JSONArray();

JSONArray members = new JSONArray();

PrintWriter out= response.getWriter();

try {

for(int i=1;i<5;i++){

JSONArray member = new JSONArray();

member.put("张飞" + i);

member.put(i *100);

members.put(member);

}

list.put(members);

out.write(list.toString());

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

out.flush();

out.close();

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值