amChart java范例 _Web前端

amChart java实例

一、amchart是什么

amchart是一组由flash做成的图表组件。这些flash没有数据，一但指定了配置文件和数据文件的地址，flash就可以显示出你所需要的图表。

在配置文件中可以设这个flash的颜色，大小，文字属性，柱子，曲线的粗细颜色，是什么类型的柱子或曲线，是否有气泡，是否有图例，定位，鼠标右键及其事件等，stock图还要在里面指定数据文件的地址。

在数据文件中存放了要展示的数，数据一般是XML类型的数据，也有用CSV或XML的类型的数据。

这里所指的文件不一定是一个真实的文件，也可以是同一个域(指访问的这个flash的域名)内部的URL，垮域URL要是全名。在我们的系统中大部分是用flash所在域的同域中。

二、amcharts 要一个“配置文件”（setting.xml）主要配置图表的样式，很多，不过都有注释，很简单，一个数据文件(amile_data.xml)，一个 SWFObject.js，一个对应的 SWF 就可以生成漂亮的统计报表了

三、个人感觉amchart的有很多复杂的图表，包括普通的曲线图，柱状图，饼图，以及雷达图....一些不知道叫什么名字。大家可以去官网看下，网址：http://www.amcharts.com/

四、优点：效果好，报表种类多，应用简单????? 缺点：用法太固定，只支持CSV和XML有局限性，不适合批量生成报表。

五、什么时候用，当涉及复杂视图别的技术无法实现（或实现的不好）的时候可以采用amchart,如果要生成的视图是一些较普遍的曲线图，柱状图，饼图...，我推荐采用open flash chart，jfreeChart等技术，关于open flash chart，jfreeChart技术怎样用，我前面整理过一份，而且open flash chart，jfreeChart的效果也不错，地址：http://lxc914-java.iteye.com/blog/845149

好，下面讲一下amChart在java中的用法，以及一些需要注意的问题。

在官网下载amcharts_2.2.1.zip文件解压，解压找到swfobject.js，amradar.swf，setting.xml添加到项目中。

1.在setting.xml文件中，我们需要为报表设置样式，由于太多，在这里就不写了，在附中会有项目实例，这个配置文件，每一行，都有注释，都很简单。

2.数据文件，我采用，从后台获取数据，传到jsp页面，在jsp页面中，动态的生成xml文件，在生成视图的时候引用这个文件就可以，详细代码如下：

?????????? data.jsp文件：

      <%@ page language="java" import="java.util.*"%>   
<%@ page contentType="text/xml; charset=utf-8"%>   
<?xml version="1.0" encoding="UTF-8"?>   
<chart>   
<axes>   
	<%   
    String data=String.valueOf(request.getSession().getAttribute("data"));  
    System.out.println(data); 
    if(data.equals("1")){
   %>   
<axis xid='0'>激情工作 </axis>
<axis xid='1'>协调一致</axis>
<axis xid='2'>积极主动</axis>
<axis xid='3'>持续学习 </axis>
<axis xid='4'>正直诚信</axis>
<axis xid='5'>合作共赢</axis>
<axis xid='6'>效率最优</axis>
<axis xid='7'>不断创新</axis>
<%}else if(data.equals("2")){ %>
<axis xid='0'>激情工作2 </axis>
<axis xid='1'>协调一致2</axis>
<axis xid='2'>积极主动2</axis>
<axis xid='3'>持续学习2</axis>
<axis xid='4'>正直诚信2</axis>
<axis xid='5'>合作共赢2</axis>
<axis xid='6'>效率最优2</axis>
<axis xid='7'>不断创新2</axis>
<%} %>
</axes>   
    
<graphs>   

<graph gid="1">   
<value xid='0'>4.5</value>
<value xid='1'>3</value>
<value xid='2'>3.1</value>
<value xid='3'>4.6</value>
<value xid='4'>2.1</value>
<value xid='5'>0.9</value>
<value xid='6'>4.8</value>
<value xid='7'>4.9</value>
</graph>


<graph gid="2">    
<value xid='0'>2.4</value>
<value xid='1'>4.11</value>
<value xid='2'>3.33</value>
<value xid='3'>2.6</value>
<value xid='4'>1.5</value>
<value xid='5'>4.7</value>
<value xid='6'>1.8</value>
<value xid='7'>2.0</value>
</graph>

<graph gid="8">    
<value xid='0'>0</value>
<value xid='1'>1</value>
<value xid='2'>2</value>
<value xid='3'>3</value>
<value xid='4'>4</value>
</graph>

</graphs>   
</chart>

?3.生成视图

??? 在页面中需要引入，swfobject.js，amradar.swf，setting.xml这3个文件，详细代码如下：

       <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'success.jsp' starting page</title>
    
	<script type="text/javascript" src="common/swfobject.js"></script>
  </head>
 
  <body>
  <%String randoms=String.valueOf(Math.random()*100);%>
    	<div id="radar" align="center"></div>
		<br/><br/>
		<div id="radar100%" align="center"></div>
  </body>
   <script type="text/javascript">
		var so = new SWFObject("common/amradar.swf", "radar", "700", "600", "0", "#FFFFFF");
		so.addVariable("path", "radar/");
		so.addVariable("settings_file","radar/amradar_settings.xml");
		so.addVariable("data_file", "radar/data.jsp?<%=randoms%>");
		so.write("radar");
		
		var so = new SWFObject("common/amradar.swf", "radar", "700", "600", "0", "#FFFFFF");
		so.addVariable("path", "radar/");
		so.addVariable("settings_file","radar/amradar_setting_stacked.xml");
		so.addVariable("data_file", "radar/data.jsp?<%=randoms%>");
		so.write("radar100%");
	</script>
</html>

???? 在上面的代码中我生成了两种样式的雷达图，

???? so.addVariable("data_file", "radar/data.jsp?<%=randoms%>");这行代码我只所以在请求的末尾加一个随机数，是因为flash在浏览器中的缓存机制，这样每次请求就会被认为一个新的请求，屏蔽了缓存问题，得到实时的数据。

例子是基于struts2写的。效果见附近。