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();

图片

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 &#128515; https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...