Amcharts 实现动态曲线图

Amcharts 实现动态曲线图 收藏

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

 

首先是amline_setting.xml的配置

 

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

<!-- Value between [] brackets, for example [#FFFFFF] shows default value which is used if this parameter is not set -->

<!-- This means, that if you are happy with this value, you can delete this line at all and reduce file size -->

<!-- value or explanation between () brackets shows the range or type of values you should use for this parameter -->

<!-- the top left corner has coordinates x = 0, y = 0                                                                -->

<!-- "!" before x or y position (for example: <x>!20</x>) means that the coordinate will be calculated from the right side or the bottom -->

<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>

<!-- saved from url=(0013)about:internet -->

<!-- ampie script-->

  <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>

<!-- end of ampie script -->

</body>

</html>

 

 

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

 

posted @ 2012-11-13 14:54  软件小书童  阅读(1969)  评论(0)    收藏  举报