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

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

直接贴代码

   WEB端：

     //柱状图函数
   /*
    多项数据对比显示 AJAX 返回 JSON对象必需类似于 [{'name':'名称1','list':[1,2],'year',2012},{'name':'名称2','list':[6,7],'year',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();

   贴图：