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>