由于业务需要,需要将后台数据使用图表的方式展现在前端。目前关于图表展现的软件比较多,有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>