如何在jQplot中直接使用來自ajax響應的JSON

Question

我想在jQplot中使用JSON數組。這個JSON來自Ajax命中Struts動作。

當我給靜態值jQplot其渲染圖。但是當我給JSON abject的圖表不是渲染。

下面是發送JSON陣列jsp頁面Struts動作代碼，

while (rs.next()) { 
         JSONObject obj = new JSONObject(); 
         /*RouteUsageDetailsPojo r = new RouteUsageDetailsPojo(); 
         r.setRouteid(rs.getInt(1)); 
         r.setCount(rs.getInt(2)); 
         graphDetails.add(r);*/      
         obj.put("routecode", rs.getInt(3)); 
         obj.put("count", rs.getInt(2)); 
         obj.put("routename", rs.getString(1)); 
         details.put(obj); 
         System.out.println(obj); 
        } 
        HttpServletRequest request = ServletActionContext.getRequest(); 
        request.setAttribute("graphdetail", details); 
      } catch (Exception e) { 
        e.printStackTrace(); 
      } 
      HttpServletResponse response=ServletActionContext.getResponse(); 
      PrintWriter out=null; 
      try { 
        out=response.getWriter(); 
      } catch (IOException e) { 
        // TODO Auto-generated catch block 
        e.printStackTrace(); 
      } 
      System.out.println("success"); 
      out.print(details.toString()); 
      return null; 

下面是JSON其中我給到圖表

onSelect: function(date) { 

        $.ajax({ 

        type: "POST", 

        url: "filtergraph.action", 

        data: "fromDate="+from+"&toDate="+date, 

        dataType: "json", 

        success: function(response){ 

    var plot = $.jqplot('chart1', [response], { 
          title: 'Route vs Passenger Count', 
          series:[{renderer:$.jqplot.BarRenderer}], 
          axesDefaults: { 
           tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
           tickOptions: { 
           angle: -30, 
           fontSize: '10pt' 
           } 
          }, 
          axes: { 
          xaxis: { 
           renderer: $.jqplot.CategoryAxisRenderer 
          } 
          } 
         }); 

    } 

的AJAX擊中操作類，和響應

條形圖正在呈現靜態值。下面是我給到圖表樣本的靜態值：

['Dadar To Pune',4],['Ghatkopar To Lonavala',3],['Vashi To Pune',4],['Dadar To Vashi',3],['Dadar To Khandala',4],['Dadar To Vashi Via Ghatkopar',5] 

Answer 1

首先你要你的JSON對象TOA有效jqPlot數據數組轉換...

function(date) { 

       $.ajax({ 

       type: "POST", 

       url: "filtergraph.action", 

       data: "fromDate="+from+"&toDate="+date, 

       dataType: "json", 

       success: function(response){ 
      /*Coversion of JSon 
      * object to jqPlot 
      * data array .*/ 

      var array = []; 
      for (var prop_name in response) { 
       array.push([prop_name, response[prop_name]]); 
      } 

      // use array as a data array 
      var plot = $.jqplot('chart1', [array], { 
         title: 'Route vs Passenger Count', 
         series:[{renderer:$.jqplot.BarRenderer}], 
         axesDefaults: { 
          tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
          tickOptions: { 
          angle: -30, 
          fontSize: '10pt' 
          } 
         }, 
         axes: { 
         xaxis: { 
          renderer: $.jqplot.CategoryAxisRenderer 
         } 
         } 
        }); 

}