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>