jqplot AJAX 获取JSON对象 动态生成柱状图

项目需求,需要用到报表插件,以前提到过用Highcharts 但商业用收费,继续找插件 后来找到了jqplot 虽然没有Highcharts 好看但能实现功能就行了。

直接贴代码

WEB端:

//柱状图函数
/*
多项数据对比显示 AJAX 返回 JSON对象必需类似于 [{'name':'名称1','list':[1,2],'year',2012},{'name':'名称2','list':[6,7],2013}]
显示出来的数据为2012(名称1:1,名称2:6),2013(名称1:2,名称2:7)

特别说明:因为分类提示框只接收JSON对象(label:name),所以在构建时添加 'label':[label:名称1]

*/
function createBarCharts(){
var ticks =[];//X轴显示数据数组
var labelsObj = []; //分类提示框数组
var ajaxDataRenderer = function (url,plot,options) {
var ret = null; //返回数据
var dataJson = [];
$.ajax({
async: false,
url: url,
dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
dataJson[i] = data[i].list;
ticks[i] = data[i].year;
labelsObj[i] = data[i].label;
}
ret = dataJson;
}
});
return ret;
};
var jsonurl = "/test/servlet/BarServlet"; //JSON数据地址

var options = {
title: "柱状图数据展现",//柱状图标题
seriesDefaults: {
renderer: $.jqplot.BarRenderer,//以柱图经行渲染
pointLabels:{show:true,stackedValue: true},//数据点显示参数
show: true
},
series: labelsObj,//分类
legend: { show: true,placement: 'outsideGrid'},//分类栏是否显示和位置设置

axes: {
//X轴显示内容 以容器解析 数组
xaxis: {renderer: $.jqplot.CategoryAxisRenderer,ticks:ticks
},
//Y轴显示内容 默认解析
yaxis: { renderer: $.jqplot.LogAxisRenderer }
},
dataRenderer: ajaxDataRenderer,
dataRendererOptions: { unusedOptionalUrl: jsonurl }
}
plot = $.jqplot("chart1",jsonurl,options);//创建柱状图
}

服务端(servlet):

response.setCharacterEncoding("UTF-8"); //设置编码格式
response.setContentType("text/html");
JSONArray members = new JSONArray();
PrintWriter out= response.getWriter();
try {
for(int i=1;i<5;i++){
JSONObject member = new JSONObject();
JSONObject label = new JSONObject();
member.put("label",label.put("label","张飞" + i));//构建分类提示内容
JSONArray list = new JSONArray();
for(int k=1;k<5;k++){
list.put(k*100);
}
member.put("year",(2012 + i));//构建X轴显示内容
member.put("list",list); //构建数据
members.put(member);
}
out.write(members.toString());

} catch (JSONException 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...