带有JSON数组的jqplot折线图

带有JSON数组的jqplot折线图

本文介绍了带有JSON数组的jqplot折线图-未加载图表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的Spring Controller类如下

My Spring Controller class looks like this

@SuppressWarnings("rawtypes")
    @RequestMapping(value = "/cityGridView", method = RequestMethod.GET)
    public @ResponseBody
    List showLineChart(Map<String, Object> map,
            HttpServletRequest request, HttpServletResponse response) {
        List<Object> rows = new ArrayList<Object>();
        List<MapTable> list = contactService.fin();
        for (MapTable table : list) {
            List<Object> dataRow = new ArrayList<Object>(1);
            dataRow.add(table.getSRDate());
            dataRow.add(table.getNumberOfSR());
            rows.add(dataRow);
        }
        return rows;
    }

在我的jsp中,我会像这样处理响应. (似乎是这里的问题?)

In my jsp i handle response like this. (seems issue in here ??)

<div id="chart1" style="width: 800px;height: 500px" ></div>
    <script type="text/javascript">
    $(document).ready(function(){
          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 = 'cityGridView.html';

    var today = new Date();

    var plot1 = $.jqplot('chart1', jsonurl, {
          title:'Data Point Highlighting',
          dataRenderer: ajaxDataRenderer,
          dataRendererOptions: {
              unusedOptionalUrl: jsonurl
              },
          axes:{
            xaxis:{
                label: "SR_DATES",
                'numberTicks' : 7,
                min: '2012-10-01',
                max: '2012-10-07',
                renderer:$.jqplot.DateAxisRenderer,
                rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                tickInterval:'1 day',
                tickOptions:{
                    formatString:'%Y-%#m-%#d'
                    }
            },
            yaxis:{
                label: "SR COUNT",
                tickOptions:{
                    formatString:'%d'
                    },
                min:10,
                max:30
            }
          },
          highlighter: {
            show: true,
            sizeAdjust: 7.5
          },
          cursor: {
            show: true
          }
      });
    });

    </script>

  • 我的JSON这样

    • My JSON like this

      [["2012-10-01",15.0],["2012-10-02",20.0],["2012-10-03",25.0],["2012-10-04",18.0 ],["2012-10-05",22.0],["2012-10-06",24.0]]

      [["2012-10-01",15.0],["2012-10-02",20.0],["2012-10-03",25.0],["2012-10-04",18.0],["2012-10-05",22.0],["2012-10-06",24.0]]

      这里显示了我的MapTable类

      Here shows my MapTable Class

      public class MapTable {
      
          private Date SRDate;
          private int numberOfSR;
      
          public Date getSRDate() {
              return SRDate;
          }
      
          public void setSRDate(Date sRDate) {
              SRDate = sRDate;
          }
      
          public int getNumberOfSR() {
              return numberOfSR;
          }
      
          public void setNumberOfSR(int numberOfSR) {
              this.numberOfSR = numberOfSR;
          }
      }
      

      contactService.fin();调用服务类和方法的方法最后在DAO类中.数据也像我上面提到的array一样正确地出现.这是我的DAO类

      contactService.fin(); Method called to Service Classes & finally it in DAO classes.Data also correctly come like above i mentioned array.here is my DAO class

      public List<MapTable> fin(){
              @SuppressWarnings("unchecked")
              List<MapTable> dashboardBeanList = jdbcTemplate
                          .query("select trunc(ASSIGNED_datetime) as SR_DATE, count(*) as COUNT " +
                                  "from sbl_service_request_v " +
                                  "where SR_TYPE ='Complaint' " +
                                  "and DATE_COMMITED  is not null " +
                                  "and ASSIGNED_DIVISION  in ('CSO','IT_IVR') " +
                                  "and trunc(ASSIGNED_datetime) >= sysdate -30 " +
                                  "group by  trunc(ASSIGNED_datetime) " +
                                  "order by trunc(ASSIGNED_datetime)",
                                                  new Object[] {},
                                      new RowMapper() {
                                            public MapTable mapRow(ResultSet rs, int rowNum)
                                                        throws SQLException {
                                                MapTable dashboardBean=new MapTable();
                                                dashboardBean.setSRDate(rs.getDate("SR_DATE"));
                                                dashboardBean.setNumberOfSR(rs.getInt("COUNT"));
                                                return dashboardBean;
                                            }
                                      });
              return dashboardBeanList;
          }
      

      推荐答案

      您的预期JSON数据与实际JSON数据在两种方面有所不同,您尚未说明哪些差异很重要.但是,我将首先解决"rows":位,因为它代表了JSON的结构差异(与数据值差异相反).

      Your expected vs actual JSON data are different in a couple of ways and you have not stated which differences matter. But I'll tackle the "rows": bit first as it represents a JSON structural difference (as opposed to data value differences).

      您的实际JSON输出包含"rows":属性,因为您已经从控制器返回了Grid对象-该对象具有一个名为rows的字段,该字段中填充了列表列表.如果您只是想让JSON包含列表列表,请从控制器中返回该列表:return rows.

      Your actual JSON output contains the "rows": property because you have returned a Grid object from your controller - which had a field called rows populated with your list of lists. If you simply want your JSON to contain the list of lists, then return that from your controller: return rows.

      您的日期格式也不同,因此,第一步我将查看您的MapTable .getSRDate()的getter方法-您的问题中没有足够的信息/代码可以直接解决此问题.

      Your date format is also different, so I would look at the getter method for your MapTable .getSRDate() as a first step - there is not enough info/code in your question to address this directly.

      这篇关于带有JSON数组的jqplot折线图-未加载图表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-29 04:43