amchart 配置详解

来源:互联网 发布:手机连接电视同一网络 编辑:程序博客网 时间:2024/06/09 18:18

amchart的原理是通过一个主html文件(例如:index.html),包含一段JS代码,这段JS代码将调用相关的图形的SWF文件(amcolumn.swf),数据源我采用的是XML的方式(例如:amcolumn_data.xml),然后通过一个主设置文件(amcolumn_settings.xml),从而产生图形显示的。

拿柱形图来说,就是通过index.html主页面将amcolumn_data.xml的数据通过amcolumn.swf来进行显示,而amcolumn_settings.xml是对所产生图形的配置进行设置的文件,包括颜色,宽度等。

 

 

 

 

复制代码
<body> <div id="flashcontent">  <strong>You need to upgrade your Flash Player</strong> </div>
 <script type="text/javascript" src="amstock/swfobject.js"></script> <script type="text/javascript">    var so = new SWFObject("/amchart/amchart/amcolumn/amcolumn.swf", "amcolumn", "520", "380", "8", "#FFFFFF"); // 创建SWFObject对象  so.addVariable("path", "/amchart/amchart/amcolumn/"); 
  so.addVariable("settings_file", encodeURIComponent("xxx.xml")); // 配置文件   so.addVariable("preloader_color", "#000000"); // 加载时显示的颜色  so.write("flashcontent"); // 在flashcontent位置写入flash插入的HTML </script></body>
复制代码

复制代码
<?xml version="1.0" encoding="UTF-8"?><!-- Only the settings with values not equal to defaults are in this file. If you want to see thefull list of available settings, check the amstock_settings.xml file in the amstock folder. --><settings>全局根标签<legend_position>right</legend_position>图例位置<legend_width>200</legend_width>图例宽度<margins>12</margins>边距        <text_color>FF7F00</text_color>文字颜色<text_size>14</text_size>文字大小                     <max_series>100</max_series>最多线条数<start_on_axis>1</start_on_axis>是否从原点开始<number_format>数据格式  <decimal_separator>.</decimal_separator>小数点符号  <digits_after_decimal>    <data>2</data>  </digits_after_decimal>  <letters>     <letter number="1"></letter>最小单位     <letter number="1000000000">B</letter>最大单位  </letters>   </number_format><data_sets>   <data_set>数据源配置       <file_name>/taa/rpc/data_suggestion.jsp?entry=<%=taaGroupUserId%>_<%=category%></file_name> 数据源文件路径       <csv>         <reverse>true</reverse>要设置为true否则下面的日期滚动区域会乱掉         <separator>,</separator>数据分隔符         <date_format>YYYY-MM-DD</date_format>日期格式         <decimal_separator>.</decimal_separator>小数点符号               <columns>更数配置                   <column>date</column>列名                   <column>closePrice</column>                   <column>saa</column>                   <column>taaCollect</column>                   <column>taaTWCollect</column>                   <column>scale</column>               </columns>       </csv>    </data_set></data_sets><charts>    <chart>图形框配置    <bg_color>000000</bg_color>背景色    <border_color>000000</border_color>边框颜色    <border_alpha>100</border_alpha>边框过滤度    <grid>图形框中的分隔线    <x>X轴上的分隔线        <dashed>true</dashed>是否打散    </x>    <y_left>Y轴上的分隔线        <color>cccccc</color>分隔线颜色        <alpha>100</alpha>过滤度        <dashed>true</dashed>是否打散    </y_left>    </grid>     <values>       <x>X轴上的数值             <enabled>true</enabled>是否显示             <bg_color>000000</bg_color>背景色         </x>     <y_left>Y轴上的数值       <enabled>true</enabled>是否显示       <unit>%</unit>Y轴数值单位       <unit_position>right</unit_position>Y轴数值单位位置     </y_left>     </values>    <comparing>       <calculate>false</calculate>是否重新计算    </comparing>    <legend>图例设置        <show_date>true</show_date>是否显示        <graph_on_off>true</graph_on_off>默认        <fade_others_to>15</fade_others_to>默认    <value_color>FF7F00</value_color>数值颜色    <positive_color>ff0000</positive_color>大于0%显示的颜色    <negative_color>00ff00</negative_color>小于0%显示的颜色    </legend>    <graphs>        <graph>线条配置          <color>00ff00</color>线条颜色          <title>公司SAA</title>标题            <axis>left</axis>Y轴位置             <type>line</type>线条类型            <smoothed>true</smoothed>是否光滑            <!--            <bullet>round</bullet>数据结点样式            -->        <bullet_alpha>0</bullet_alpha>过滤度        <bullet_position>middle</bullet_position>数据结点位置        <width>2</width>线条宽度            <data_sources>数据源              <close>saa</close>数据列名称            </data_sources>            <cursor_color>ffffff</cursor_color>鼠标聚焦颜色          <fill_alpha>0</fill_alpha>过滤度            <legend>图例数据配置              <date key="true" title="true"><![CDATA[<b>{close}%</b>]]></date>            <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>            </legend>        </graph>                <graph>            <title>投委会TAA</title>          <color>ff00ff</color>            <axis>left</axis>             <smoothed>true</smoothed>            <!--            <bullet>round</bullet>            -->        <bullet_alpha>0</bullet_alpha>        <bullet_position>middle</bullet_position>        <width>2</width>            <data_sources>              <close>taaTWCollect</close>             </data_sources>            <cursor_color>ffffff</cursor_color>          <fill_alpha>0</fill_alpha>            <legend>              <date key="true" title="true"><![CDATA[<b>{close}%</b>]]></date>            <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>            </legend>        </graph>            <graph>          <color>ffff00</color>          <title>TAA小组</title>            <axis>left</axis>             <type>line</type>             <smoothed>true</smoothed>            <!--            <bullet>round</bullet>            -->        <bullet_alpha>0</bullet_alpha>        <bullet_position>middle</bullet_position>        <width>2</width>            <data_sources>              <close>taaCollect</close>             </data_sources>            <cursor_color>ffffff</cursor_color>          <fill_alpha>0</fill_alpha>            <legend>              <date key="true" title="true"><![CDATA[<b>{close}%</b>]]></date>            <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>            </legend>        </graph>        <graph>            <title><%=stockName%></title>          <color>ff0000</color>            <axis>right</axis>             <type>line</type>             <smoothed>true</smoothed>            <!--            <bullet>round</bullet>            -->        <bullet_alpha>0</bullet_alpha>        <bullet_position>middle</bullet_position>        <width>2</width>            <data_sources>              <close>closePrice</close>             </data_sources>            <cursor_color>ffffff</cursor_color>          <fill_alpha>0</fill_alpha>            <legend>                  <value_color>FF7F00</value_color>              <date key="true" title="true"><![CDATA[<b>{close}</b>]]></date>            <period key='true' title='true'><![CDATA[<b>{close}</b>]]></period>            </legend>        </graph><%if(!taaGroupUserId.equals("0")){%>        <graph>            <title><%=fullName%></title>            <color>00ffff</color>            <axis>left</axis>             <type>line</type>             <smoothed>true</smoothed>            <!--            <bullet>round</bullet>            -->        <bullet_alpha>0</bullet_alpha>        <bullet_position>middle</bullet_position>        <width>2</width>            <data_sources>              <close>scale</close>      </data_sources>            <cursor_color>ffffff</cursor_color>          <fill_alpha>0</fill_alpha>        <legend>        <date key='true' title='true'><![CDATA[<b>{close}%</b>]]></date>        <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>      </legend>             </graph><%}%>    </graphs>    </chart></charts><data_set_selector>数据选择器    <enabled>false</enabled>  <width>130</width> 宽度  <max_comparing_count>30</max_comparing_count>最多比较个数  <main_drop_down_title>选择:</main_drop_down_title>选择框名称  <compare_list_box_title>比较:</compare_list_box_title>下拉比较框名称  <balloon_text>      <![CDATA[ <b>{title}</b><br>{description}]]>鼠标移上去弹出框显示内容  </balloon_text>    <drop_down>下拉比较框样式设置      <bg_color>333333</bg_color>背景色      <bg_color_selected>333333</bg_color_selected>选中颜色      <bg_color_hover>ffffff</bg_color_hover>鼠标移上去显示颜色      <scroller_color>ff0000</scroller_color>滚动条颜色    </drop_down></data_set_selector>      <balloon>弹出小窗设置    <bg_color>ffffff</bg_color>背景色    <text_color>FF7F00</text_color>字体颜色    <bg_alpha>100</bg_alpha>过滤度    <border_color>000000</border_color>边框颜色  </balloon>  <period_selector>日期区域设置    <button>      <bg_color>1C1A1C</bg_color>背景色      <bg_color_selected>ffffff</bg_color_selected>选中时背景色      <bg_color_hover>00FF99</bg_color_hover>鼠标移上去背景色    </button>    <input>      <bg_color>1C1A1C</bg_color>输入框背景色    </input>        <periods>              <period type="DD" count="10">10天</period>        <period type="MM" count="1" selected="true">1月</period>        <period type="MM" count="3">3月</period>        <period type="YYYY" count="1">1年</period>              <period type="MAX">最大</period>        </periods>        <periods_title>缩放:</periods_title>缩放区域名称        <custom_period_title>自定义区间:</custom_period_title>自定义区间名称  </period_selector>  <header>图头    <enabled>false</enabled>是否显示      <text>          <![CDATA[ <b>{title}</b>]]>图头文字      </text>      <text_size>14</text_size>文字大小  </header>      <plot_area>    <border_color>1C1A1C</border_color>选中区域边框颜色  </plot_area>  <scroller>    <graph_data_source>close</graph_data_source>数据源    <resize_button_style>arrow</resize_button_style>播放图标样式    <resize_button_color>002b6d</resize_button_color>播放图标颜色    <graph_selected_fill_alpha>100</graph_selected_fill_alpha>选中区域过滤度    <playback>      <enabled>true</enabled>是否允许      <speed>3</speed>滚动速度    </playback>    <selected_color>1C1A1C</selected_color>选中区域颜色    <bg_color>666666</bg_color>背景色  </scroller>    <background>    <color>000000</color>整体背景色    <alpha>100</alpha>过滤度  </background>      <date_formats>日期显示格式    <x_axis>X轴上的日期        <days>MM月DD日</days>天样式      <months>MM月</months>月样式      <years>YYYY年</years>年样式    </x_axis>    <legend>图例上的日期      <days>YYYY年MM月DD日</days>天样式      <months>MM月</months>月样式      <weeks>YYYY年MM月DD日</weeks>年样式    </legend>  </date_formats></settings>
复制代码
原创粉丝点击