首页 > 其他 > 详细

amchart

时间:2014-02-09 19:53:49      阅读:376      评论:0      收藏:0      [点我收藏+]

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

使用amchart时需要四个文件:

  1. swf文件(根据生成的不同的图标类型有amline.swf(最常用)、column.swf、pie.swf、stock.swf)swfobject.js(用来把swf嵌入html中)、
  2. amline.swf(line版的swf,还有column、pie、stock等对应的swf)
  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>

使用时:

bubuko.com,布布扣
<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>
bubuko.com,布布扣

 

 

amchart

原文:http://www.cnblogs.com/yigeqi/p/3541691.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!