amcharts使用总结

阅读更多

    由于业务需要，需要将后台数据使用图表的方式展现在前端。目前关于图表展现的软件比较多，有high chart，JFree charts 等。我们选择的是amcharts。
    最开始我们使用amcharts1.6版本，其具有较低的学习成本。其在前端的工作量很少，主要写如下代码：


var uri2="checkSeatQuery01.htm?dep="+dep+"&arr="+arr+"&date="+date+"&time="+Math.random();
var so2 = new SWFObject("/static/js/amline.swf", "amline", "100%", "100%", "8", "#FFFFFF");
so2.addVariable("path", "/static/js/");
so2.addVariable("settings_file", encodeURIComponent("/static/xml/amline_settings_checkSeat2.xml"));
so2.addVariable("data_file", escape(uri2));//通过url传入动态数据
so2.write("flashcontent2");

    其中amline_settings_checkSeat2.xml为图表配置文件，可以参考http://extra.amcharts.com/editor/line/ ，你实时的调节相关配置参数，就能动态看到效果了，然后他还可以直接帮你生成你所需要的配置文件，非常方便。
    而uri2则负责在后台将请求数据封装成xml格式，如下：

@RequestMapping("checkSeatQuery01.htm")
public void checkSeatQuery01(final HttpServletRequest request, final HttpServletResponse response,ModelMap result) throws IOException
{
       
        String dep=UnicodeToString(request.getParameter("dep"));
        String arr=UnicodeToString(request.getParameter("arr"));
        String date=request.getParameter("date");
        try{
                List> resultlist=checkSeatService.selectCheckSeat(dep, arr, date);
               
                String s=generateDataXmlString(resultlist);
                PrintWriter writer = response.getWriter();
                writer.write(s);
        }
        catch(Exception e){
                logger.info("check seat service failure",e);
        }
       
}

private static String generateDataXmlString(List> list) {
        if (list == null || list.size() == 0){
                return "";
        }
        StringBuffer series = new StringBuffer("");
        StringBuffer graphs=new StringBuffer("");
        for(int i=0;i                Iterator it = list.get(i).keySet().iterator();
                int j=0;
                graphs.append("");
                if(!it.hasNext()){
                        series.append("0");
                        graphs.append("0");
                }
                while(it.hasNext()){
                        String key=(String)it.next();
                        if(i==0){
                                series.append(""+key+"");
                        }
                        graphs.append(""+list.get(i).get(key)+"");
                        j++;
                }
                if(i==0)
                series.append("");
                graphs.append("");
               
               
        }
        series.append(graphs).append("");
        return series.toString();
}




    以上使用十分简单，但是由于是url主动去请求数据，当在一个页面上画多图，同时应用在存在多机器的时候，页面上的图展示的可能是不同机器的数据（而不是同一机器上的，不符合需求）。
    随后，我们使用ancharts2.2版本，将数据一次性传到前端，用js解析，然后交给amcharts画图，主要的工作集中到前端JS如下：