amchart 配置详解
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 the full 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>