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>

<strong>You need to upgrade your Flash Player</strong>

</div>

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>

</digits_after_decimal>

<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>taaCollect</column>

<column>taaTWCollect</column>

<column>scale</column>

</columns>

</csv>

</data_set>

</data_sets>

<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>

<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>

<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>

<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>

<!--

<bullet>round</bullet>

-->

<bullet_alpha>0</bullet_alpha>

<bullet_position>middle</bullet_position>

<data_sources>

<close>taaTWCollect</close>

</data_sources>

<cursor_color>ffffff</cursor_color>

<fill_alpha>0</fill_alpha>

<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>

<!--

<bullet>round</bullet>

-->

<bullet_alpha>0</bullet_alpha>

<bullet_position>middle</bullet_position>

<data_sources>

<close>taaCollect</close>

</data_sources>

<cursor_color>ffffff</cursor_color>

<fill_alpha>0</fill_alpha>

<date key="true" title="true"><![CDATA[<b>{close}%</b>]]></date>

<period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>

</legend>

</graph>

<graph>

<axis>right</axis>

<!--

<bullet>round</bullet>

-->

<bullet_alpha>0</bullet_alpha>

<bullet_position>middle</bullet_position>

<data_sources>

<close>closePrice</close>

</data_sources>

<cursor_color>ffffff</cursor_color>

<fill_alpha>0</fill_alpha>

<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>

<!--

<bullet>round</bullet>

-->

<bullet_alpha>0</bullet_alpha>

<bullet_position>middle</bullet_position>

<data_sources>

<close>scale</close>

</data_sources>

<cursor_color>ffffff</cursor_color>

<fill_alpha>0</fill_alpha>

<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>日期区域设置

<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>

<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>

<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>选中区域过滤度

<enabled>true</enabled>是否允许

<speed>3</speed>滚动速度

</playback>

<selected_color>1C1A1C</selected_color>选中区域颜色

<bg_color>666666</bg_color>背景色

</scroller>

<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>

猜你喜欢