Question

我想在jQplot中使用JSON数组。这个JSON来自于Ajax对Struts的攻击。</ p>

当我给jQplot提供静态值时，它的渲染图表。但是当我给予JSON时，图表不会呈现。

下面是Struts动作代码，它将JSON数组发送到jsp页面，

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;

下面是ajax命中行动类，以及我给予图表

的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
                             }
                           }
                         });

    }

条形图呈现静态值。下面是我给图表的样本静态值：

['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对象转换为有效的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
                         }
                       }
                     });

}

如何直接在jQplot中使用JSON来自ajax响应

1 个答案: