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<Map<String,Object>> 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<Map<String,Object>> list) { 
        if (list == null || list.size() == 0){ 
                return "<chart><series></series><graphs></graphs></chart>"; 
        } 
        StringBuffer series = new StringBuffer("<chart><series>"); 
        StringBuffer graphs=new StringBuffer("<graphs>"); 
        for(int i=0;i<list.size();i++){ 
                Iterator it = list.get(i).keySet().iterator(); 
                int j=0; 
                graphs.append("<graph gid=\""+i+"\">"); 
                if(!it.hasNext()){ 
                        series.append("<value xid=\"0\">0</value>"); 
                        graphs.append("<value xid=\"0\">0</value>"); 
                } 
                while(it.hasNext()){ 
                        String key=(String)it.next(); 
                        if(i==0){ 
                                series.append("<value xid=\""+j+"\">"+key+"</value>"); 
                        } 
                        graphs.append("<value xid=\""+j+"\">"+list.get(i).get(key)+"</value>"); 
                        j++; 
                } 
                if(i==0) 
                series.append("</series>"); 
                graphs.append("</graph>"); 
                
                
        } 
        series.append(graphs).append("</graphs></chart>"); 
        return series.toString(); 
} 




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


<script type="text/javascript"> 
var chart1; 
var chart2; 
var chart3; 
jQuery(document).ready(function(){ 
var request_rate;//后台传入的数据集 
var success_percent；//后台传入的数据集 
var request_rate；//后台传入的数据集 
//var chartData=[{data:1000,price:125},{data:1230,price:100},{data:1250,price:150},{data:1500,price:140},{data:900,price:80}] 
//一共画三张图； 
amchartDisplay(chart1,parseData(collect_performance),"chartdiv0"); 
amchartDisplay(chart2,parseData(success_percent),"chartdiv1"); 
amchartDisplay(chart3,parseData(request_rate),"chartdiv2"); 
}); 
//数据解析函数，以满足amcharts输入要求。 
function parseData(data){ 
//alert(data); 
var dataProvider=[]; 
var rows = data.split(";"); 
for (var i = 0; i < rows.length; i++){ 
if (rows[i]) {                    

var column = rows[i].split(":"); 
var time = column[0]; 
var value = column[1]; 
var dataObject = {data:time, price:value}; 
dataProvider.push(dataObject); 
} 
}  
//alert(dataProvider); 
return dataProvider;  
} 
//amcharts画图函数 
function amchartDisplay(chart,chartData,div){ 
chart = new AmCharts.AmSerialChart(); 
//chart.pathToImages = "/lib/samples/javascript/images/"; 
chart.panEventsEnabled = true; 
chart.zoomOutButton = { 
backgroundColor: "#000000", 
backgroundAlpha: 0.15 
}; 
chart.dataProvider = chartData; 
chart.validateData(); 
chart.categoryField = "data"; 

//设置横坐标; 
var categoryAxis = chart.categoryAxis; 
// categoryAxis.parsedatas = true; // as our data is data-based, we set parsedatas to true 
// categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD 
//categoryAxis.dashLength = 1; 
categoryAxis.gridAlpha = 0; 
// categoryAxis.axisColor = "#DADADA"; 
// categoryAxis.gridCount = 15; 
//categoryAxis.autoGridCount = false; 

// 设置纵坐标value                
var valueAxis = new AmCharts.ValueAxis(); 
valueAxis.axisColor = "#DADADA"; 
valueAxis.dashLength = 1; 
//valueAxis.logarithmic = true; // this line makes axis logarithmic 
chart.addValueAxis(valueAxis); 

// GRAPH 
var graph = new AmCharts.AmGraph(); 
graph.type = "smoothedLine"; 
graph.bullet = "round"; 
graph.bulletColor = "#FFFFFF"; 
graph.bulletBorderColor = "#00BBCC"; 
graph.bulletBorderThickness = 2; 
graph.bulletSize = 7; 
graph.title = "Price"; 
graph.valueField = "price"; 
graph.lineThickness = 2; 
graph.lineColor = "#00BBCC"; 
chart.addGraph(graph); 
// CURSOR 
var chartCursor = new AmCharts.ChartCursor(); 
chartCursor.cursorPosition = "mouse"; 
chart.addChartCursor(chartCursor); 
// SCROLLBAR 
var chartScrollbar = new AmCharts.ChartScrollbar(); 
chart.addChartScrollbar(chartScrollbar); 
// WRITE 
var parent=document.getElementById(div); 
while(parent.hasChildNodes())    //注意，此处需要清空div内容，以避免浏览器缓存上次的图形信息。 
{ 
parent.removeChild(parent.firstChild); 
} 
chart.write(div);//画图到指定的div上 

}   

</script>