当前位置: 代码迷 >> Web前端 >> amChart java范例
  详细解决方案

amChart java范例

热度:394   发布时间:2012-08-30 09:55:54.0
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写的。效果见附近。

?
  相关解决方案