amcharts学习总结
?
?
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>
?
?
?