zoukankan      html  css  js  c++  java
  • 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>

     

  • 相关阅读:
    打印出乘法表
    python小练习1
    JavaScript 两个变量互换
    纯css3 画一个小猪佩奇
    箭头函数
    点击获取li下标的几种方式
    再见!!!!!!
    十月一前期
    大家好!!!!!!
    雕刻技
  • 原文地址:https://www.cnblogs.com/yigeqi/p/3541691.html
Copyright © 2011-2022 走看看