Question

我使用Morris Chart时遇到了一些问题。

我想使用来自外部源的JSON使用Morris Chart显示事务的详细信息。这是我的代码：

$(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放入'data：'属性时，图表会显示出来。但是当它从外部源（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

在搜索和创建新函数后，我已经意识到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。

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

从外部JSON破坏的Morris图表

1 个答案: