amchart

amchart能够根据提供的数据便捷的生成好看的图标,曾在项目中遇到使用falsh版以支持对js支持不好的低版本浏览器,但是现在官网上都是js版本的,flash版的文档都没有,搜索结果一般都是链接到博客里。这里稍微记录一下。

使用amchart时需要四个文件:

  1. swf文件(根据生成的不同的图标类型有amline.swf(最常用)、column.swf、pie.swf、stock.swf)、
  2. swfobject.js(用来把swf嵌入html中)
  3. 配置文件:settings.xml,用于设置图表的显示位置颜色图例等等
  4. 数据文件:data.xml或data.csv(画图需要的数据,包括横坐标和纵坐标,amchart不会对数据做处理,而是按照data.xml或data.csv里提供的一个横坐标数据,一个纵坐标数据一个点一个点画出来的,也就是说如果横坐标是日期时间点,若缺少了某一天的数据,是不会显示一个空白点的)

其实还应该有一个amcharts_key.txt文件,没有它的话会在生成的图的左上角显示amcharts的公司logo(曾经在这个文件里填入类似AMCHART-SN3G-****-****-****-****1605-7040-1005-8046有效),把这个文件跟swf文件放在同一个目录下就可以了。 

配置文件类似于这样:

<settings>
<text_size>9</text_size>
<font>Arial</font>
<data_type>xml</data_type> 
<plot_area>  
</plot_area>
<axes>
 <x>
  ......
   </x>
   <y_left>
  ...... 
   </y_left>
</axes>
<values>
 <x> 
 </x>
   <y_left> 
   </y_left>
</values>
<graphs >
<graph gid="0">  
</graph>
<graph gid="1">  
</graph>
</graphs>
</settings> 

其中xaxis指横坐标,graphs指纵坐标。这个数据的意思就是在一个图中有两条折线,它们共用一个横坐标。配置的属性可以在http://extra.amcharts.com/editor/column/中进行可视化配置,它会自动生成你想要的配置文件。 

数据文件类似于这样:

<chart>
<xaxis>
<value xid='0'>2013-12-02</value>
<value xid='1'>2013-12-03</value>
......
</xaxis>
<graphs>
<graph gid='0'>
<value xid='0'>264.83</value>
<value xid='1'>263.03</value>
......
</graph>
<graph gid='1'>
<value xid='0'>234.97</value>
<value xid='1'>250.12</value>
......
</graph>
</graphs>
</chart>

使用方法:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var so = new SWFObject("amline.swf", "amline", "100%", "100%", "8", "#FFFFFF"); 
so.addVariable("settings_file", escape("hjJiZhunJiaSettings-ri.xml"));
so.addVariable('data_file', escape("hjJiZhunJia-ri.xml"));
so.write("hjJiZhunJiaChart-ri");//对应html中用来显示图的区域 
</script>

 

 

posted @ 2014-02-09 17:14  荔枝龙眼  阅读(1282)  评论(0编辑  收藏  举报

这里是页脚Html代码