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 Playerstrong>
div>
<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"?>
<settings>全局根标签
<legend_position>rightlegend_position>图例位置
<legend_width>200legend_width>图例宽度
<margins>12margins>边距
<text_color>FF7F00text_color>文字颜色
<text_size>14text_size>文字大小
<max_series>100max_series>最多线条数
<start_on_axis>1start_on_axis>是否从原点开始
<number_format>数据格式
<decimal_separator>.decimal_separator>小数点符号
<digits_after_decimal>
<data>2data>
digits_after_decimal>
<letters>
<letter number="1">letter>最小单位
<letter number="1000000000">Bletter>最大单位
letters>
number_format>
<data_sets>
<data_set>数据源配置
<file_name>/taa/rpc/data_suggestion.jsp?entry=<%=taaGroupUserId%>_<%=category%>file_name> 数据源文件路径
<csv>
<reverse>truereverse>要设置为true否则下面的日期滚动区域会乱掉
<separator>,separator>数据分隔符
<date_format>YYYY-MM-DDdate_format>日期格式
<decimal_separator>.decimal_separator>小数点符号
<columns>更数配置
<column>datecolumn>列名
<column>closePricecolumn>
<column>saacolumn>
<column>taaCollectcolumn>
<column>taaTWCollectcolumn>
<column>scalecolumn>
columns>
csv>
data_set>
data_sets>
<charts>
<chart>图形框配置
<bg_color>000000bg_color>背景色
<border_color>000000border_color>边框颜色
<border_alpha>100border_alpha>边框过滤度
<grid>图形框中的分隔线
<x>X轴上的分隔线
<dashed>truedashed>是否打散
x>
<y_left>Y轴上的分隔线
<color>cccccccolor>分隔线颜色
<alpha>100alpha>过滤度
<dashed>truedashed>是否打散
y_left>
grid>
<values>
<x>X轴上的数值
<enabled>trueenabled>是否显示
<bg_color>000000bg_color>背景色
x>
<y_left>Y轴上的数值
<enabled>trueenabled>是否显示
<unit>%unit>Y轴数值单位
<unit_position>rightunit_position>Y轴数值单位位置
y_left>
values>
<comparing>
<calculate>falsecalculate>是否重新计算
comparing>
<legend>图例设置
<show_date>trueshow_date>是否显示
<graph_on_off>truegraph_on_off>默认
<fade_others_to>15fade_others_to>默认
<value_color>FF7F00value_color>数值颜色
<positive_color>ff0000positive_color>大于0%显示的颜色
<negative_color>00ff00negative_color>小于0%显示的颜色
legend>
<graphs>
<graph>线条配置
<color>00ff00color>线条颜色
<title>公司SAAtitle>标题
<axis>leftaxis>Y轴位置
<type>linetype>线条类型
<smoothed>truesmoothed>是否光滑
<bullet_alpha>0bullet_alpha>过滤度
<bullet_position>middlebullet_position>数据结点位置
<width>2width>线条宽度
<data_sources>数据源
<close>saaclose>数据列名称
data_sources>
<cursor_color>ffffffcursor_color>鼠标聚焦颜色
<fill_alpha>0fill_alpha>过滤度
<legend>图例数据配置
<date key="true" title="true">{close}%]]>date>
<period key='true' title='true'>{close}%]]>period>
legend>
graph>
<graph>
<title>投委会TAAtitle>
<color>ff00ffcolor>
<axis>leftaxis>
<smoothed>truesmoothed>
<bullet_alpha>0bullet_alpha>
<bullet_position>middlebullet_position>
<width>2width>
<data_sources>
<close>taaTWCollectclose>
data_sources>
<cursor_color>ffffffcursor_color>
<fill_alpha>0fill_alpha>
<legend>
<date key="true" title="true">{close}%]]>date>
<period key='true' title='true'>{close}%]]>period>
legend>
graph>
<graph>
<color>ffff00color>
<title>TAA小组title>
<axis>leftaxis>
<type>linetype>
<smoothed>truesmoothed>
<bullet_alpha>0bullet_alpha>
<bullet_position>middlebullet_position>
<width>2width>
<data_sources>
<close>taaCollectclose>
data_sources>
<cursor_color>ffffffcursor_color>
<fill_alpha>0fill_alpha>
<legend>
<date key="true" title="true">{close}%]]>date>
<period key='true' title='true'>{close}%]]>period>
legend>
graph>
<graph>
<title><%=stockName%>title>
<color>ff0000color>
<axis>rightaxis>
<type>linetype>
<smoothed>truesmoothed>
<bullet_alpha>0bullet_alpha>
<bullet_position>middlebullet_position>
<width>2width>
<data_sources>
<close>closePriceclose>
data_sources>
<cursor_color>ffffffcursor_color>
<fill_alpha>0fill_alpha>
<legend>
<value_color>FF7F00value_color>
<date key="true" title="true">{close}]]>date>
<period key='true' title='true'>{close}]]>period>
legend>
graph>
<%if(!taaGroupUserId.equals("0")){%>
<graph>
<title><%=fullName%>title>
<color>00ffffcolor>
<axis>leftaxis>
<type>linetype>
<smoothed>truesmoothed>
<bullet_alpha>0bullet_alpha>
<bullet_position>middlebullet_position>
<width>2width>
<data_sources>
<close>scaleclose>
data_sources>
<cursor_color>ffffffcursor_color>
<fill_alpha>0fill_alpha>
<legend>
<date key='true' title='true'>{close}%]]>date>
<period key='true' title='true'>{close}%]]>period>
legend>
graph>
<%}%>
graphs>
chart>
charts>
<data_set_selector>数据选择器
<enabled>falseenabled>
<width>130width> 宽度
<max_comparing_count>30max_comparing_count>最多比较个数
<main_drop_down_title>选择:main_drop_down_title>选择框名称
<compare_list_box_title>比较:compare_list_box_title>下拉比较框名称
<balloon_text>
{title}
{description}]]>鼠标移上去弹出框显示内容
balloon_text>
<drop_down>下拉比较框样式设置
<bg_color>333333bg_color>背景色
<bg_color_selected>333333bg_color_selected>选中颜色
<bg_color_hover>ffffffbg_color_hover>鼠标移上去显示颜色
<scroller_color>ff0000scroller_color>滚动条颜色
drop_down>
data_set_selector>
<balloon>弹出小窗设置
<bg_color>ffffffbg_color>背景色
<text_color>FF7F00text_color>字体颜色
<bg_alpha>100bg_alpha>过滤度
<border_color>000000border_color>边框颜色
balloon>
<period_selector>日期区域设置
<button>
<bg_color>1C1A1Cbg_color>背景色
<bg_color_selected>ffffffbg_color_selected>选中时背景色
<bg_color_hover>00FF99bg_color_hover>鼠标移上去背景色
button>
<input>
<bg_color>1C1A1Cbg_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>falseenabled>是否显示
<text>
{title}]]>图头文字
text>
<text_size>14text_size>文字大小
header>
<plot_area>
<border_color>1C1A1Cborder_color>选中区域边框颜色
plot_area>
<scroller>
<graph_data_source>closegraph_data_source>数据源
<resize_button_style>arrowresize_button_style>播放图标样式
<resize_button_color>002b6dresize_button_color>播放图标颜色
<graph_selected_fill_alpha>100graph_selected_fill_alpha>选中区域过滤度
<playback>
<enabled>trueenabled>是否允许
<speed>3speed>滚动速度
playback>
<selected_color>1C1A1Cselected_color>选中区域颜色
<bg_color>666666bg_color>背景色
scroller>
<background>
<color>000000color>整体背景色
<alpha>100alpha>过滤度
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>