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

图片:


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值