Amcharts 实现动态曲线图

来源：互联网发布：逆战刷天神套软件编辑：程序博客网时间：2024/05/17 04:15

一直在做在Java里如何实现动态曲线图，在amcharts网站找到了动态曲线图的例子，但是只有配置文件，没有如何实现的，php代码不公开。然后自己又研究了很久，实现的都不是很理想，直到最近问题终于解决了，在Java中使用Java代码也能实现了。

首先是amline_setting.xml的配置

<?xml version="1.0" encoding="UTF-8"?>





<settings>
<data_type>xml</data_type>
<reload_data_interval>1</reload_data_interval>
<add_time_stamp>true</add_time_stamp>
<digits_after_decimal>2</digits_after_decimal>
<plot_area>
<border_alpha>100</border_alpha>
<border_color>DAF0FD</border_color>
<margins>
<top>10</top>
<bottom>30</bottom>
<left>5</left>
<right>3</right>
</margins>
</plot_area>
<grid>
<x>
<color>38AEE0</color>
<alpha>100</alpha>
</x>
<y_left>
<color>38AEE0</color>
<alpha>100</alpha>
</y_left>
</grid>
<axes>
<x>
<width>1</width>
<color>DAF0FD</color>
</x>
<y_left>
<alpha>0</alpha>
</y_left>
</axes>
<values>
<x>
<skip_first>false</skip_first>
<skip_last>false</skip_last>
</x>
<y_left>
<min>50</min>
<max>70</max>
<unit>$</unit>
<unit_position>left</unit_position>
<inside>true</inside>
<skip_last>true</skip_last>
</y_left>
</values>
<indicator>
<zoomable>false</zoomable>
<color>357BBC</color>
<x_balloon_text_color>FFFFFF</x_balloon_text_color>
<y_balloon_on_off>false</y_balloon_on_off>
</indicator>
<legend>
<enabled>false</enabled>
</legend>
<graphs>
<graph>
<color>357BBC</color>
<bullet>round_outlined</bullet>
</graph>
</graphs>
</settings>

然后是数据文件的配置 amline.jsp:

<%@ page language="java" import="java.util.*"%>
<%@ page contentType="text/xml; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<?xml version="1.0" encoding="UTF-8"?>
<chart>
<series>
<%
       for(int i=0;i<7;i++)
       {
        Date date=new Date();
  String []strdate=date.toString().split(" ");
  String subdate=strdate[3];
%>
<value xid="<%=i%>"><%=subdate%></value>
<%
        Thread.sleep(1000);
       }
%>
</series>
<graphs>
<graph>
<%
for(int j=0;j<7;j++)
{
    Double num1=Math.random()*(63.00-55.00)+55.00;
String num2=num1.toString().substring(0, 5);
%>
<value xid="<%=j%>"><%=num2%></value>
<%
}
%>
</graph>
</graphs>
</chart>

最后到页面显示配置 amline.html：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>amline</title>
</head>

<body>


<script type="text/javascript" src="amline/swfobject.js"></script>
<div id="flashcontent">
显示
  <strong>You need to upgrade your Flash Player</strong>
</div>
<script type="text/javascript">
  // <![CDATA[
  var so = new SWFObject("amline/amline.swf", "amline", "800", "600", "8", "#FFFFFF");
  so.addVariable("path", "amline/");
  so.addVariable("settings_file", escape("amline/amline_settings.xml"));
  so.addVariable("data_file", "amline.jsp");
        so.addVariable("preloader_color", "#999999");
  so.write("flashcontent");
  // ]]>
</script>

</body>
</html>

最后会出现如下效果（如果运行起来就是动态会不断变化的，只是现在只能截取一段图像了）