amchart構成の詳細
91595 ワード
amchart構成の詳細
http://www.amcharts.com
amchart構成の詳細
amchartの原理は、関連するグラフィックのSWFファイル(amcolumn.swf)を呼び出すJSコードを含むプライマリhtmlファイル(例えば、index.html)によって、XML方式(例えば、amcolumn_data.xml)をデータソースとして使用し、プライマリ設定ファイル(amcolumn_settings.xml)によってグラフィック表示を生成することです.
柱図で言えばindex.htmlホーム画面amcolumn_data.xmlのデータはamcolumn.swfで表示し、amcolumn_settings.xmlは、生成されたグラフィックの構成を設定するファイルで、色、幅などが含まれます.
http://www.amcharts.com
amchart構成の詳細
amchartの原理は、関連するグラフィックのSWFファイル(amcolumn.swf)を呼び出すJSコードを含むプライマリhtmlファイル(例えば、index.html)によって、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>