从外部 JSON 破坏的莫里斯图

Question

我在使用莫里斯图时遇到了一些问题。

我想使用来自外部源的 JSON 使用莫里斯图表显示交易的详细信息。这是我的代码：

$(document).ready(function() {

//getting JSON data from external sources
var json_data = (function() {
    var json;
    $.ajax({
         type:'GET',
         url: 'http://localhost:8080/masterpiece/chartGetTransaction',
         async: false,
         global: false,
        success: function(data) {
            json = data;
        }, 
        error:function(){
            alert("Error loading chart");
        }
    });
    return json;
})();

 //testing purposes to see whether json is shown up or not.
 alert(json_data);

 new Morris.Bar({
    // ID of the element in which to draw the chart.
    element: 'pesanan-chart-area',
    data: json_data,
    xkey: 'tahun',
    ykeys: ['jml'],
    labels: ['Jumlah'],
    smooth: false
 });
});

但它总是坏掉。

JSON 本身：

   [{"tahun":"2013-10-12","jml":3},{"tahun":"2013-11-16","jml":2},{"tahun":"2013-12-23","jml":4},]

当我将 JSON 手动放置到“数据：”属性时，图表会显示出来。但是当它从外部源（json_data var）引用时，它就坏了

有什么想法吗？

谢谢。

更新

更新！ JSON 是使用名为 json-simple (https://code.google.com/p/json-simple/downloads/list) 的第三方库从 JAVA 函数生成的

protected List<JSONObject> statisticPesanan(){
    List<JSONObject> det = new ArrayList<JSONObject>();
    try {
        //create JSONObject to executed
        String sql = "SELECT * FROM vstatisticpesanan";
        cs = datman.logOn().prepareCall(sql);
        ResultSet result = cs.executeQuery();
        while (result.next()) {
            JSONObject details = new JSONObject();
            details.put("tahun", result.getString(1));
            details.put("jml", result.getInt(2));
            det.add(details);
        }
    } catch (SQLException se) {
        Logger.getLogger(Analytics.class.getName()).log(Level.SEVERE, null, se);
        java.lang.System.out.println("Error on Analytics Generate JSON Pesanan Statistics : " + se.toString());
    } finally {
        datman.logOff(); 
    }    
    return det;
}

然后通过 servlet 调用：

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();
    try {
        /* Execution of jSON Chart */
        Analytics show = new Analytics();
        List<JSONObject> json =  show.getStatisticPesanan();
        out.print('[');
        for(JSONObject js : json){
              out.print(js.toJSONString()+",");
        }
        out.print(']');
    } finally {
        out.close();
    }
}

有什么解决办法吗？谢谢。

Answer 1

alrite 在搜索和创建新函数后，我意识到 morris.js 无法解析 JSON 对象。

先把servlet改成：

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
 response.setContentType("text/html;charset=UTF-8");
 PrintWriter out = response.getWriter();
 try {
    /* Execution of jSON Chart */
    Analytics show = new Analytics();
    List<JSONObject> json =  show.getStatisticPesanan();       
          out.print(js.toJSONString());
 } finally {
    out.close();
 }
}

然后它将显示正确的 JSON 对象，如下所示：

[{"1":"2013-10-12","2":3},{"1":"2013-11-16","2":2},{"1":"2013-12-23","2":4},{"1":"2014-02-11","2":10}]

然后将JSON对象解析成

 new Morris.Bar({
   // ID of the element in which to draw the chart.
   element: 'pesanan-chart-area',
   data: $.parseJSON(json_data),
   xkey: 'tahun',
   ykeys: ['jml'],
   labels: ['Jumlah'],
   smooth: false
});

我们需要使用$.parseJSON函数来使图形正确显示，否则图形将显示undefined。

我希望这会对某人有所帮助。