【问题标题】:jqplot line chart with json array - Chart not loaded带有json数组的jqplot折线图-未加载图表
【发布时间】:2012-10-21 17:56:07
【问题描述】:

我的 Spring Controller 类看起来像这样

@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 中,我处理这样的响应。 (这里似乎有问题??)

<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 是这样的

    [["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 类

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 类中调用它。 数据也正确地像上面提到的数组一样。这是我的 DAO 类

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

【问题讨论】:

  • 我回滚了修订版 8,因为它是在接受答案之后制作的,并且不应在问题本身中添加解决方案,而应将其作为答案发布。

标签: jquery json spring jsp jqplot


【解决方案1】:

您的预期 JSON 数据与实际 JSON 数据在几个方面有所不同,您没有说明哪些差异很重要。但我将首先处理 "rows": 位,因为它代表 JSON 结构差异(而不是数据值差异)。

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

您的日期格式也不同,因此我会首先查看您的 MapTable .getSRDate() 的 getter 方法 - 您的问题中没有足够的信息/代码来直接解决这个问题。

【讨论】:

  • 我已根据您的要求更改了上述问题并在其中添加了其他数据。请再次检查并帮助我解决该问题
  • 您需要将日期格式指定为所需格式 YYYY-MM-DD - 当前输出是默认的 toString() 表示。您还没有解决我提出的 JSON 格式问题(完全删除网格类)。
  • 现在我删除了 Grid 类并编辑了控制器类中的方法。当我运行它时,firefox 卡住并显示弹出消息“此页面上的脚本可能正忙,或者它可能已停止响应。您可以立即停止脚本,在调试器中打开脚本,或让脚本继续。脚本:localhost:8080/Dashboard/js/jquery-1.5.2.min.js:16" & 告诉我停止脚本。我的 JSP 代码有什么问题吗?
  • nickdos : 现在我的图表 x 和 y 轴,背景也加载了。谢谢,但我的数据行还没有显示。我的 JS 脚本有什么问题吗?
  • 使用 Firefox Firebug 或 Chrome“检查元素”在你的 javascript 中查找控制台错误。