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

图片:


你可能感兴趣的:(jqplot AJAX JSON对象创建饼状图)